Скрыть кнопку обзора на типе ввода = файл

Есть ли способ скрыть кнопку обзора и оставить текстовое поле во всех браузерах?

Я попытался установить поля, но они отображаются в разных браузерах.

Ответ 1

Нет, что вы можете сделать, это (уродливое) обходное решение, но в основном используется

Создайте нормальный ввод и изображение
Создать ввод файла с непрозрачностью 0
Когда пользователь нажимает на изображение, вы имитируете клик по вводу файла
При изменении ввода файла вы передаете это значение нормальному входу (чтобы пользователь мог видеть путь)

Здесь вы можете увидеть полное объяснение вместе с кодом:

http://www.quirksmode.org/dom/inputfile.html

Ответ 2

Вы можете просто не скрывать элемент, просто сделать его прозрачным, сделав его непрозрачность 0.

Приведение скрытого входного файла приведет к тому, что он будет работать STOP. Поэтому НЕ ДЕЛАЙТЕ ЭТО..

Здесь вы можете найти пример для прозрачной операции просмотра,

Ответ 3

ниже код очень полезен, чтобы скрыть кнопку поиска по умолчанию и использовать пользовательский вместо

<style type="text/css">
        .file-input-wrapper {
            height: 30px;
            margin: 2px;
            overflow: hidden;
            position: relative;
            width: 118px;
            background-color: #fff;
            cursor: pointer;
        }
        .file-input-wrapper > input[type="file"] {
            font-size: 40px;
            position: absolute;
            top: 0;
            right: 0;
            opacity: 0;
            cursor: pointer;
        }
        .file-input-wrapper > .btn-file-input {
            background-color: #494949;
            border-radius: 4px;
            color: #fff;
            display: inline-block;
            height: 34px;
            margin: 0 0 0 -1px;
            padding-left: 0;
            width: 121px;
            cursor: pointer;
        }
        .file-input-wrapper:hover > .btn-file-input {
            //background-color: #494949;
        }
        </style>

        <body>
            <div class="file-input-wrapper">
              <button class="btn-file-input">SELECT FILES</button>
              <input type="file" name="image" id="image" value="" />      
            </div>
            <span id="img_text" style="float: right;
            margin-right: -80px;
            margin-top: -14px;"></span>
    </body>

        <script>
            (function($){       
                $('input[type="file"]').bind('change',function(){           
                    $("#img_text").html($('input[type="file"]').val());
                });
            })(jQuery)
        </script>

Ответ 4

        .dropZoneOverlay, .FileUpload {
            width: 283px;
            height: 71px;
        }

        .dropZoneOverlay {
            border: dotted 1px;
            font-family: cursive;
            color: #7066fb;
            position: absolute;
            top: 0px;
            text-align: center;
        }

        .FileUpload {
            opacity: 0;
            position: relative;
            z-index: 1;
        }

        <div class="dropZoneContainer">
            <input type="file" id="drop_zone" class="FileUpload" accept=".jpg,.png,.gif" onchange="handleFileSelect(this) " />
            <div class="dropZoneOverlay">Drag and drop your image <br />or<br />Click to add</div>
        </div>

Ответ 5

Просто дополнительный намек на то, чтобы избежать слишком большого количества JavaScript здесь: если вы добавите ярлык и стилируете его, как "кнопку обзора", которую вы хотите иметь, вы можете поместить его над реальной кнопкой просмотра, предоставляемой браузером, или скрыть кнопку как-то иначе. Нажав на метку, поведение браузера откроет диалог для поиска файла (не забудьте добавить атрибут "для" на метке со значением идентификатора поля ввода файла, чтобы это произошло). Таким образом вы можете настроить кнопку практически любым способом.

В некоторых случаях может потребоваться добавить второе поле ввода или текстовый элемент, чтобы отобразить значение ввода файла и полностью скрыть вход, как описано в других ответах. Тем не менее метка не позволит имитировать щелчок на кнопке ввода текста с помощью JavaScript.

Кстати, подобный хак можно использовать для настройки флажков или радиокнопков. добавив для них ярлык, нажав на метку, вы должны установить флажок/радиокнопку. Собственный флажок/радиобудильник затем может быть скрыт и заменен пользовательским элементом.

Ответ 6

Как ни странно, это работает для меня (когда я помещаю внутри тега кнопки).

.button {
    position: relative;

    input[type=file] {
            color: transparent;
            background-color: transparent;
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
            top: 0;
            opacity: 0;
            z-index: 100;
        }
}

Проверяется только в Chrome (macOS Sierra).

Ответ 7

Итак, я нашел это решение очень простым в реализации и дает очень чистый графический интерфейс

поместите это в свой HTML

<label class="att-each"><input type="file"></label>

и это в вашем CSS

label.att-each {
width: 68px;
height: 68px;
background: url("add-file.png") no-repeat;
text-indent: -9999px;
}

add-file.png может быть любой графикой, которую вы хотите показать на веб-странице. При нажатии на графический файл запускается файл-проводник по умолчанию.

Рабочий пример: http://www.projectnaija.com/file-picker17.html