选择选项的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

回答

相关问题