選擇選項的CSS

我有一個簡單的下拉列表中選擇選項 - 例如下面選擇選項的CSS

<select> 
    <option value="volvo" title="NEED THIS BIGGER AND FORMATED" >Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select>

當鼠標懸停在沃爾沃型工具提示的彈出 - 但希望它更大和更快出現。

有沒有解決方案 - 可能是CSS。

來源

2017-02-28 Mark James

這是非常麻煩的風格'select'標籤。你也可以用div/ul/whatever來代替。這些很容易風格。以下是樣式選擇標籤的一些示例：https://codepen.io/ericrasch/pen/zjDBx – Evochrome

我懷疑這正是你想要的，但它是朝這個方向邁出的一步。正如@Evochrome提到的那樣，很難設計原生select元素。在上面設計title屬性更加困難。

爲了確定select元素的樣式，您需要添加size屬性。這會產生將select轉換爲列表而非下拉列表的潛在不良影響。不幸的是這是必需的。

從那裏，我們可以通過創建設置爲title屬性content的:after僞元素，使用option[title]:hover:after選擇風格的title。這允許您爲樣式標題屬性提供一些選項，但仍然有限。

div { 
 
    position: relative; 
 
} 
 

 
select { 
 
    width: 100px; 
 
} 
 

 
option[title]:hover:after { 
 
    content: attr(title); 
 
    position: absolute; 
 
    display: block; 
 
    left: 110px; 
 
    top: 0; 
 
    font-size: 24px; 
 
    font-style: italic; 
 
    border: 2px solid #000000; 
 
}

<div> 
 
<select size="4"> 
 
    <option value="volvo" title="NEED THIS BIGGER AND FORMATED" ><a>Volvo</a></option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select> 
 
</div>

來源

2017-02-28 23:31:26

這就是我正在尋找的 - 但在css文件中似乎沒有工作 - 雖然在這裏工作得很好。 –

不應該在CSS文件中。風格可能會被推翻。 –

選項中的標題css位於屏幕的右側，而不是選項旁邊。 –

選擇選項的CSS

回答

相關問題