Html 选择选项下划线

Question

我遇到了在 html 中给元素加下划线的问题

请在此处找到代码:

<select>
    <option>select</option>
    <option style="text-decoration: underline;">one </option>
    <option>two</option>
    <option>three</option>
</select>

jsFiddle

Answer 1

当谈到跨浏览器时，大多数 css 不能应用于原生控件，如 select在这种情况下。替代方法是使用 jquery-ui 而不是在幕后，它们隐藏选择元素并显示外观，通常它们是 <ul>/<li>。 , <span>或 <div> .通过 CSS，您也可以改变它的外观。

先决条件:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> /*Jquery Library*/
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> /*Jquery UI Library*/
<script src="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"></script> /*Jquery UI CSS*/

HTML 标记:

<select>
    <option>select</option>
    <option>one</option>
    <option>two</option>
    <option>three</option>
</select>

Javascript:

$(document).ready(function(){
     $('select').selectmenu();
})

样式表 (CSS):

li, span
{
    text-decoration: underline;  
}

.ui-selectmenu-button{
    width:150px !important;
}

JSFiddle 演示: Working Demo