Стиль ввода = Файл как кнопка

Question

Я пытаюсь добавить какой-то стиль во входной файл, он же загрузчик, и мне трудно с ним работать, есть ли какое-нибудь решение без флеш-памяти (может быть, jquery или даже простой javascript)?

Answer 1

Используйте свойство clip, чтобы отделить кнопку от поля ввода, скрыть ее с помощью opacity: 0, а затем расположить ее над стилизованной кнопкой.

* > /**/ input[type="file"], x:-webkit-any-link {
  outline: none; 
  cursor: pointer; 
  position: absolute; 
  top:0; 
  clip: rect(0px 86px 22px 0px); /* Webkit; use 0px 222px 22px 145px for other browsers */
  z-index:2;
  opacity:0;
}

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

Answer 2

Это выполнимо, но не так просто.Вам нужно имитировать ввод файла с помощью обычного элемента / кнопки ввода и накладывать на него исходный ввод файла.Короче говоря: http://www.quirksmode.org/dom/inputfile.html Для этого есть плагины jQuery, например this .

Answer 3

Я написал плагин jQuery с именем jfancyfile , который предназначен именно для этого.

Это намного больше, чем все остальные решения, поскольку позволяет использовать для кнопки любые размеры .

Что-то, что я думал, должно было быть разработано, так как я не мог найти это в Интернете.

Предупреждение: он еще не был протестирован во всех веб-браузерах!

Answer 4

Я думаю, что на этой странице Quirksmode может быть ваше решение: http://www.quirksmode.org/dom/inputfile.html

Я думаю, что CSS - ваша лучшая ставка.

Answer 5

Некоторое время назад я написал следующее, чтобы помочь мне с этой проблемой.Некоторое время не обновлялся, но, пожалуйста, дайте мне знать, если найдете ошибки (просто создайте проблему на странице GitHub).

http://github.com/topherfangio/FancyFile