Мне интересно, как скрыть часть текстового поля стандартного тега загрузки HTML-тегов
например
<input type="file" name="somename" size="chars">
Это генерирует явно текстовое поле, а рядом с ним - кнопка обзора... Я хочу скрыть часть текстового поля, но держать кнопку.
Я бы рекомендовал скрывать все это и помещать отдельный объект кнопки, который при нажатии будет в конечном итоге нажатием кнопки просмотра ввода.
Вы можете сделать это с помощью CSS и javascript - проверить эту статью (на самом деле второй раз я использовал эту ссылку сегодня).
Это, безусловно, будет работать, я использовал его в своих проектах. Надеюсь, это поможет:)
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
Самый простой способ, который не упоминается ни в одном ответе, - использовать label для input.
<input type="file" name="myFile" id="myFile">
<label for="myFile">Choose your file</label>
input[type="file"] { display: none; }
Использование label будет полезно, потому что нажатие на метку нажимает на вход.
Это будет работать, только если вход id равен метке for.
Вы можете поместить изображение в качестве фона для кнопки. Это сработало для меня некоторое время назад.
Кнопка ввода file очень сложна для стилизации и управления, главным образом по соображениям безопасности.
Если вам действительно нужно настроить свою кнопку загрузки, я рекомендую загрузчик на основе Flash, например SWFUpload или Uploadify, который позволяет вам использовать пользовательское изображение как кнопку, отображать индикатор выполнения и другие вещи.
Однако его основная философия отличается от простого встраивания элемента управления в форму. Процесс загрузки происходит отдельно. Убедитесь, что вы сначала проверьте, работает ли это для вас.
input[type="file"] { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0 265px 22px 155px); } /* Hide input field */
@-moz-document url-prefix()
{
input[type="file"] { clip: rect(0, 265px, 22px, 125px); } /* Mozilla */
}
* > /**/ input[type="file"], x:-webkit-any-link { clip: rect(0, 86px, 22px, 0); } /* Webkit */
Это сделает то же самое без JavaScript, но требует абсолютного позиционирования для использования свойства clip.
Ссылки
Чистый css и html
Фокус в том, чтобы использовать кнопку над кнопкой входного файла.
Кроме того, вы должны установить
filter: alpha(opacity=0);
во входной файл.
Вы можете скрыть весь элемент и показать вместо него кнопку или ссылку. Это довольно просто.
<input type="file" name="file" id="fileupload" style="width:200px; display:none;" onchange="submitmyform();" />
<input type="button" value="Select an Image" onclick="$('#fileupload').click();" />
Элемент загрузки файла скрыт. Кнопка запустит событие клика и отобразит окно браузера файлов. При выборе файла происходит событие изменения, и он может отправить форму или вызвать функцию script.
Надеюсь, что это поможет...
Если вы используете jQuery, посмотрите на этот плагин - https://github.com/ajaxray/bootstrap-file-field
Он отобразит поле ввода файла в качестве кнопки начальной загрузки и красиво отобразит выбранные имена файлов. Кроме того, вы можете установить различные ограничения, используя простые атрибуты данных или настройки в js.
e, g, data-file-types="image/jpeg,image/png" будет ограничивать выбор типов файлов, кроме изображений jpg и png.
Попробуйте добавить этот css к вашему входу
font-size: 0;