Question

我通过相关问题看到了一些结果，但实际上似乎没有显示我想要的内容。寻找一种简单地在所有主要的broswers中设置按钮样式的方法。

<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是微软的产品，圆角优雅地降级。

html输入按钮样式CSS3

4 个答案: