Question

我有一个简单的下拉选择选项 - 下面的示例

<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。

Answer 1

我怀疑这正是你想要的，但这是朝这个方向迈出的一步。正如@Evochrome提到的那样，很难对原生select元素进行样式化。在此基础上设置title属性的样式更加困难。

为了设置select元素的样式，您需要添加size属性。这会产生将select转换为列表而非下拉列表的潜在不良影响。不幸的是这是必需的。

我们可以使用title选择器创建:after伪元素，并将content设置为title属性，从而为option[title]:hover:after设置样式。这允许您为标题属性设置样式的一些选项，但您仍然有限。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

选择选项Css

1 个答案: