Стиль кнопки ввода HTML3

Question

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

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

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

Answer 1

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

Answer 2

Не пытайтесь это сделать!

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

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

Answer 3

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

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, закругленные углы изящно ухудшаются.