Есть ли способ скрыть кнопку обзора и оставить текстовое поле во всех браузерах?
Я попытался установить поля, но они отображаются в разных браузерах.
Есть ли способ скрыть кнопку обзора и оставить текстовое поле во всех браузерах?
Я попытался установить поля, но они отображаются в разных браузерах.
Нет, что вы можете сделать, это (уродливое) обходное решение, но в основном используется
Здесь вы можете увидеть полное объяснение вместе с кодом:
Вы можете просто не скрывать элемент, просто сделать его прозрачным, сделав его непрозрачность 0.
Приведение скрытого входного файла приведет к тому, что он будет работать STOP. Поэтому НЕ ДЕЛАЙТЕ ЭТО..
Здесь вы можете найти пример для прозрачной операции просмотра,
ниже код очень полезен, чтобы скрыть кнопку поиска по умолчанию и использовать пользовательский вместо
<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>
.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>
Просто дополнительный намек на то, чтобы избежать слишком большого количества JavaScript здесь: если вы добавите ярлык и стилируете его, как "кнопку обзора", которую вы хотите иметь, вы можете поместить его над реальной кнопкой просмотра, предоставляемой браузером, или скрыть кнопку как-то иначе. Нажав на метку, поведение браузера откроет диалог для поиска файла (не забудьте добавить атрибут "для" на метке со значением идентификатора поля ввода файла, чтобы это произошло). Таким образом вы можете настроить кнопку практически любым способом.
В некоторых случаях может потребоваться добавить второе поле ввода или текстовый элемент, чтобы отобразить значение ввода файла и полностью скрыть вход, как описано в других ответах. Тем не менее метка не позволит имитировать щелчок на кнопке ввода текста с помощью JavaScript.
Кстати, подобный хак можно использовать для настройки флажков или радиокнопков. добавив для них ярлык, нажав на метку, вы должны установить флажок/радиокнопку. Собственный флажок/радиобудильник затем может быть скрыт и заменен пользовательским элементом.
Как ни странно, это работает для меня (когда я помещаю внутри тега кнопки).
.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).
Итак, я нашел это решение очень простым в реализации и дает очень чистый графический интерфейс
поместите это в свой 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