Тип ввода стиля = файл не работает должным образом

Question

Я создаю шаблон css для типов форм и хочу, чтобы на входах формы была закругленная граница. Это хорошо работает с type = text, но не работает с type = file (для загрузки файла).

Что я делаю не так?

.tempform input[type="text"] {
  -moz-border-radius: 10px;
}

.tempform input[type="file"] {
  -moz-border-radius: 10px;
}

<div class="tempform">
   <label for="textfield">Test Text Field</label>
   <input type="text" id="textfield" name="textfield"></div>
</div>

div class="tempform">
   <label for="filefield">Test File Field</label>
   <input type="file" name="filefield" id="filefield-0">
   <input type="file" name="filefield" id="filefield-1">
</div>

Answer 1

К сожалению, невозможно стилизовать ввод файла, кроме небольшого изменения ширины.Браузеры просто не допускают никаких других изменений.Если вы хотите стилизовать ввод данных при загрузке файлов, вам придется использовать неприятный хак, например, поместить практически невидимый ввод загрузки файлов поверх изображения (которое работает только в некоторых браузерах) или решение JavaScript, например ajax.-загрузить .

Answer 2

Согласно первому результату поиска Google , это довольно сложно.См. эту статью на quirksmode.org для получения информации о том, как это сделать.