html 输入按钮样式 CSS3答案

【问题标题】：html input button style CSS3html 输入按钮样式 CSS3
【发布时间】：2011-03-17 02:54:39
【问题描述】：

我通过相关问题看到了一些结果，但实际上似乎并没有表明我想要什么。寻找一种在所有主要浏览器中轻松设置按钮样式的方法。

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

我希望浏览按钮使用 CSS，我看到一些结果在真实按钮之上放置了一个假按钮，这真的是最好的方法吗？

【问题讨论】：

标签： html css file input

【解决方案1】：

我发现的最佳解决方案是按照您提到的那样覆盖您自己的解决方案，或者使用 Dojo 之类的东西，它可以有效地做同样的事情。据我所知，您无法设置文件输入按钮的样式。

【讨论】：

【解决方案2】：

不要尝试这个！

即使你让它工作了，仍然有像 Safari 这样的浏览器使用非标准的文件选择小部件！

最好让原生文件小部件显示出来。

【讨论】：

【解决方案3】：

目前，无法跨浏览器统一设置文件输入字段的样式。您可以使用各种“技巧”之一（正如您提到的，它只是覆盖按钮），但请注意您可能会干扰键盘访问该字段。

【讨论】：

【解决方案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 产品，圆角会优雅地退化。

【讨论】：