如何僅使用CSS隱藏一個選項元素

<select class="Select-input"> 
    <option value="one">One</option> 
    <option value="two">Two</option> 
    <option value="three">Three</option> 
    <option value="four">Four</option> 
</select>

我想只隱藏上面代碼中的四個值。如何僅使用CSS隱藏一個選項元素

我嘗試使用{display：none}的值爲四，但它沒有奏效。

還想在this elements一，二，三和四之間添加填充。

P.S.我只想使用CSS刪除它。

來源

2015-12-16 Siren Brown

不幸的是，似乎所有的我們最大的瀏覽器會不同意這個應該怎麼處理。 FF和Chrome將接受display：none並正確處理它，而IE，Edge和Safari會忽略它。經過我自己的搜索，這是我發現的： https://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css –

屬性選擇器是關鍵，儘管Musa指出，你不能在Internet Explorer中隱藏一個選項。

文章在這裏了在IE上隱藏選項Options with display:none not hidden in IE

.Select-input option[value=four] {display: none;}

<select class="Select-input"> 
 
    <option value="one">One</option> 
 
    <option value="two">Two</option> 
 
    <option value="three">Three</option> 
 
    <option value="four">Four</option> 
 
</select>

來源

2015-12-16 16:23:40 Aaron

你知道，這不會工作在IE瀏覽器 – Musa

@Aaron新的解決方案無法在IE中工作 – Danield

這不是我的意思，你**不能**隱藏IE – Musa

試試這個，可能有助於

select option:last-child {display:none;}

來源

2015-12-16 16:24:06

試試這個：

.Select-input option:nth-of-type(2) { 
    display:none; 
}

或者你也可以這樣做是爲了：

.Select-input option:nth-child(1){ 
    display: none; 
}

來源

2015-12-16 16:25:13

你可以這樣做：

CSS

.Select-input option:nth-child(4){ 
    display: none; 
}

DEMO HERE

來源

2015-12-16 16:26:18

它在DEMO這裏工作，但不是在實際的網站。我認爲Chrome不允許這樣做。 –

我把亞倫已經回答了一部分，添加了請求的填充：

option {padding: 7px 0px 7px 5px;} 
 

 
option[value=four] {display: none;}

<select class="Select-input"> 
 
    <option value="one">One</option> 
 
    <option value="two">Two</option> 
 
    <option value="three">Three</option> 
 
    <option value="four">Four</option> 
 
</select>

來源

2015-12-16 16:33:41 Chaphasilor

如何僅使用CSS隱藏一個選項元素

回答

相關問題