html ввод кнопки стиль CSS3

Question

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

<input type="file" name="file" id="file" size="29" class="formButton" /> 
<span class="smalltext">(.txt only)</span> 

Я хочу кнопку Обзор, чтобы использовать CSS, я видел некоторые результаты, которые ставят поддельные кнопку на верхней части реальной, является то, что на самом деле лучший подход взять?

Answer 1

В настоящее время нет способа последовательно форматировать поле ввода файлов в браузерах. Вы можете использовать один из различных «трюков» там (который, как вы упомянули, просто наложил кнопку), но будьте осторожны, чтобы вы могли вмешиваться в доступ к клавиатуре в поле.

Answer 2

Лучшее решение, которое я нашел, - либо наложить свое собственное, как вы упоминали, либо использовать что-то вроде Dojo, что фактически делает то же самое. Насколько я знаю, вы не можете создать кнопку ввода файла.

Answer 3

Не пробуйте это!

Даже если вы его заработаете, есть еще браузеры, такие как Safari, которые используют нестандартные виджеты для выбора файлов!

Лучше всего разрешить отображение виджета родного файла.

Answer 4

На самом деле, с JqueryUI вы можете сделать это просто:

Javascript для переворачивания (не обязательно):

$(".fg-button:not(.ui-state-disabled)") 
       .hover(
        function(){ 
         $(this).addClass("ui-state-hover"); 
        }, 
        function(){ 
         $(this).removeClass("ui-state-hover"); 
        } 
       ) 

Кнопка Код:

<input type="submit" name="something" id="something" value="Submit" class="fg-button ui-state-default ui-corner-all"> 

Не то, что из-за IE будучи продукт Microsoft, округлые углы изящно деградируют.