2012-04-16 208 views
6

我知道选择框是一种与css样式的痛苦,但没有采取先进的技术有无论如何我可以添加一些填充按下文本有点没有它也添加填充到右侧的箭头?在选择框中填充

+0

难道你也许尝试改变填充嵌套的“选项”元素?只是一个想法... – 2012-04-16 16:52:52

+0

不,没有。选择框的样式正如你所说的那样痛苦。出于这个原因,有很多用于选择框的jQuery插件。列表框的可用跨浏览器样式非常有限。 – 2012-04-16 16:56:25

+0

这不是你所希望的吗? http://jsfiddle.net/LpvDg/ – Wasbazi 2012-04-16 17:41:03

回答

0

这里比较有意思 http://cssdeck.com/labs/styling-select-box-with-css3

测试笔者覆盖在右边的箭头,并创建了自己的,使用供应商前缀的CSS针对不同的浏览器。这样做后,你的填充是完全免费的。

+0

好吧..我当之无愧的那些downvotes。它不是我的代码。其有趣的是,它*是一个纯粹的CSS解决方案,将在90%的情况下工作。 – commonpike 2014-06-18 14:19:34

12

将此添加到您的CSS类。也许这有帮助?

-webkit-appearance:none; 
-moz-appearance:none; 
appearance:none; 
+1

它虽然隐藏了箭头.. – romainm 2017-08-09 12:27:23

4

由于select框出现不同的不同的浏览器,特别是操作系统,你不能保证一致性。

例如,我可以在Mac上做格式化的最低量是这样的:

select { height:40px; background:transparent; } 

它看起来是这样的:

Select Box

+0

所以你有什么建议吗? – 2016-02-19 19:31:58

+0

我会推荐一个自定义选择框,例如:https://jqueryui.com/selectmenu/ – redolent 2016-02-19 22:55:22