可以通过CSS设置选择选项的标题吗?

时间:2016-04-21 11:27:26

标签: html css

我正在尝试设置与选择选项相关的标题。

<select>
  <option value="volvo" title="title exemplu">Volvo</option>
  <option value="saab" title="title exemplu">Saab</option>
  <option value="mercedes" title="title exemplu">Mercedes</option>
  <option value="audi" title="title exemplu">Audi</option>
</select>

我不确定这是否可以设置,我没有设法在这里找到答案。我只找到了与选项样式相关的答案。 我看到另一个答案,人们称之为标题,但与链接有关: http://jsfiddle.net/tDQWN/

1 个答案:

答案 0 :(得分:0)

否..你不能设置默认标题的样式,但是你可以为它创建工具提示,你可以根据需要设置样式。

<强> HTML

<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in an desirable way.</p>

<强> CSS

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

示例:https://jsfiddle.net/qmyg9d6s/