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

不要尝试这个！

即使您可以使用它，仍然有像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产品，圆角会优雅地降低。