2012-04-16 246 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