html - 选择选项CSS

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>

当鼠标悬停在 Volvo 上时，会弹出一种工具提示 - 但希望它更大并且显示得更快。

是否有解决方案 - 也许是 css。

Answer 1

我怀疑这是否正是您想要的，但这是朝那个方向迈出的一步。正如@Evochrome 提到的，很难为原生 select 元素设置样式。在其之上设置 title 属性的样式更加困难。

为了设置select 元素的样式，您需要添加一个size 属性。这会产生将 select 变成列表而不是下拉列表的潜在不良效果。不幸的是，这是必需的。

从那里我们可以通过创建一个 :after 伪元素来设置 title 的样式，并将 content 设置为 title 属性，使用 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>