如何添加填充到html dropdownlist？

我想添加填充選項的HTML「選擇」標記。如何添加填充到html dropdownlist？

我嘗試將其添加到「選擇」和「選項」的樣式屬性中，並且它在IE中不起作用。

我該怎麼辦？

來源

2009-07-05 Billy

你想做什麼？爲什麼要填充選擇選項？ – 2009-07-05 08:40:15

我想添加一些空間到選擇選項的左側和右側，使其看起來更好。 – Billy 2009-07-05 09:35:13

OK，我恨聽起來都20世紀90年代，而只是前和應用無休止的選項文本的空間爲您的預期目標是可以接受的？

來源

2009-07-06 15:48:29 DVK

-3

CSS：

option{ 
padding: 0.5em; 
}

來源

2009-07-05 08:22:50

它在IE中不起作用。 – Billy 2009-07-05 08:24:49

是很困難的樣式下拉框跨瀏覽器。要獲得任何控制權，您需要使用JavaScript代碼替換。然而，要注意，：

請記住，用戶可以使用下拉有困難 - 以usabilty考慮
替換JS select元素 - 這是一個輔助的問題（也允許用戶在沒有JS支持使用形式輸入）

來源

2009-07-05 10:05:01 alex

以下作品，FF3 +和綠（大概其他的Webkit瀏覽器）：

select 
     {width: 14em; 
     margin: 0 1em; 
     text-indent: 1em; 
     line-height: 2em;} 

select * {width: 14em; 
     padding: 0 1em; 
     text-indent: 0; 
     line-height: 2em;}

寬度是允許連接在顯示的select框中沒有足夠的空間時，邊距將始終做到，text-indent用於假裝選擇框的左邊界和內部文本之間的填充。 line-height只是爲了允許垂直間距。

我不能評論它在IE中的使用，恐怕如果有人可以反饋 - 或適應 - 以適應那種好。

值得一提的是，選擇（select *）的下拉部分不受影響FF3的外面對我來說，無論出於何種原因，因此，如果這是你想要回答這個問題，我對提供什麼新的道歉。

演示在：http://davidrhysthomas.co.uk/so/select-styling.html

來源

2009-07-05 14:21:04

-3

我不能因爲某種原因使用填充或間距。我去一個jQuery的解決方案是這樣的：

$(document).click(function(){ 
    $('#selector option').each(function(){ 
    $(this).html("&nbsp;&nbsp;"+$(this).text()); 
    }); 
});

來源

2011-02-01 22:24:30 user27147

創建一個類的SELECT

.listBox{ 
    width: 200px; 
    ...etc 
}

現在定義的CSS的SELECT

.listBox option{ 
    padding:4px; 
    ...etc 
    }

選項測試IE 10

來源

2014-01-14 20:18:18 Exzile

如何添加填充到html dropdownlist？

回答

相關問題