Как скрыть текстовое поле в Html File Upload

Ответ 1

Я бы рекомендовал скрывать все это и помещать отдельный объект кнопки, который при нажатии будет в конечном итоге нажатием кнопки просмотра ввода.

Вы можете сделать это с помощью CSS и javascript - проверить эту статью (на самом деле второй раз я использовал эту ссылку сегодня).

Ответ 2

Это, безусловно, будет работать, я использовал его в своих проектах. Надеюсь, это поможет:)

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

Ответ 3

Самый простой способ, который не упоминается ни в одном ответе, - использовать label для input.

<input type="file" name="myFile" id="myFile">
<label for="myFile">Choose your file</label>

input[type="file"] { display: none; }

Использование label будет полезно, потому что нажатие на метку нажимает на вход. Это будет работать, только если вход id равен метке for.

Ответ 4

Вы можете поместить изображение в качестве фона для кнопки. Это сработало для меня некоторое время назад.

Ответ 5

Кнопка ввода file очень сложна для стилизации и управления, главным образом по соображениям безопасности.

Если вам действительно нужно настроить свою кнопку загрузки, я рекомендую загрузчик на основе Flash, например SWFUpload или Uploadify, который позволяет вам использовать пользовательское изображение как кнопку, отображать индикатор выполнения и другие вещи.

Однако его основная философия отличается от простого встраивания элемента управления в форму. Процесс загрузки происходит отдельно. Убедитесь, что вы сначала проверьте, работает ли это для вас.

Ответ 6

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 Викиучебник: обрезка

Ответ 7

DEMO

Чистый css и html

Фокус в том, чтобы использовать кнопку над кнопкой входного файла.

Кроме того, вы должны установить

filter: alpha(opacity=0);

во входной файл.

Ответ 8

Вы можете скрыть весь элемент и показать вместо него кнопку или ссылку. Это довольно просто.

<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.

Надеюсь, что это поможет...

Ответ 9

Если вы используете jQuery, посмотрите на этот плагин - https://github.com/ajaxray/bootstrap-file-field

Он отобразит поле ввода файла в качестве кнопки начальной загрузки и красиво отобразит выбранные имена файлов. Кроме того, вы можете установить различные ограничения, используя простые атрибуты данных или настройки в js.
e, g, data-file-types="image/jpeg,image/png" будет ограничивать выбор типов файлов, кроме изображений jpg и png.

Ответ 10

Попробуйте добавить этот css к вашему входу

    font-size: 0;