Styling input type = "file" с тенью блока

Question

Я использую javascript для добавления красного свечения, используя CSS box-shadow для формирования полей, которые заполнены некорректно. У меня проблема с полем ввода моего файла, в Firefox свечение распространяется вокруг кнопки обзора, и я также не могу удалить границу по умолчанию.

Есть ли способ достичь этого с помощью CSS?

Спасибо.

Вот пример -

HTML

<input type='file' id='userfile' name='userfile' maxlength='80' class='form-input'/>

Назначается класс CSS

.field-error { -webkit-box-shadow: 1px 1px 5px 5px #ff0000; -moz-box-shadow: 1px 1px 5px 5px #ff0000; box-shadow: 1px 1px 5px 5px #ff0000; border: none; }

Answer 1

Насколько я знаю, кнопка "Обзор" совершенно недоступна для манипуляций с CSS. Вам нужно несколько хитростей, чтобы преодолеть эту проблему. Я рекомендую вам взглянуть на эту статью:

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

Или используйте альтернативу jQuery:

• http://www.appelsiini.net/projects/filestyle

Answer 2

Хотя это не стандартный способ достижения этого, но вы как бы создаете div вокруг элемента file, задаете тень для div и используете width, чтобы обойти это, но опять же, это будет работать только для firefox,поскольку chrome имеет другой способ представления элемента загрузки файла.

например что-то вроде this

Answer 3

Некоторое время назад я столкнулся с подобной проблемой при вводе файлов типа. Это лучшее, что я смог найти: http://www.quirksmode.org/dom/inputfile.html

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

Обновление: также есть плагин jquery для стиля полей ввода: http://www.appelsiini.net/projects/filestyle