这是我的HTML:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
我想让产品的名称(即。'Product1'， 'Product2'，等等)，以及它的类别(即。电子，体育等)斜体，只使用CSS。我发现了一个老问题，提到这是不可能使用HTML和CSS，但希望，现在有一个解决方案。
当前回答
现在是2017年，有可能针对特定的选择。在我的项目中，我有一个class="variations"的表，选择选项在表单元格td="value"中，选择有一个ID select#pa_color。 option元素还有一个class选项="attached"(在其他类标记中)。 如果用户作为批发客户登录，他们可以看到所有的颜色选项。但是零售客户不允许购买2种颜色的选择，所以我禁用了它们
<option class="attached" disabled>color 1</option>
<option class="attached" disabled>color 2</option>
这需要一点逻辑，但以下是我如何针对禁用的选择选项。
CSS
table.variations td.value select#pa_color option.attached:disabled {
display: none !important;
}
这样，只有批发客户才能看到我的颜色选择。
其他回答
似乎我可以直接在Chrome或Firefox中为选择设置CSS。CSS和HTML代码提供如下:
. boldoption { font-weight: bold; 的 选择< > <option>一些规范-字体 <option>另一种规范-字体option</option> <option class=“boldoption”>一些勇敢的选择</option> 选择< - >
该元素由操作系统呈现，而不是HTML。它不能通过CSS样式。
$(function() { var clicky; var t=0; $(document).mousedown(function(e) { clicky = $(e.target); }); $(document).mouseup(function(e) { clicky = null; }); $("select").focusout(function(e) { if (typeof clicky.attr('id') !== typeof undefined && clicky.attr('id') !== false) { $(this).parents().children("span.selected").html(clicky.html()); $(this).children('option[value="'+clicky.attr('id')+'"]').prop('selected', true); } $(this).parents().children("span.lists").html(''); }); $('select > option').text(function(i, text) { var attr = $(this).attr('selected'); if (typeof attr !== typeof undefined && attr !== false) { $(this).parents().parents().children("span.selected").html(text); } }); $("select").focusin(function(){ $(this).children('option').text(function(i, text) { $(this).parents().children("span.lists").append("<span class='item' id='"+$(this).attr('value')+"'>"+text+"</span>"); }); }); }); select { width: 0px; height: 0px; overflow:hidden; outline: none; border: none; appearance:none; -moz-appearance: none; } label{ display: inline-block; padding: 5px 10px; position: relative; width: 100px; height: 20px; background-color:#ccc; } label .selected{ display: inline-block; overflow: hidden; width: 100%; height: 100%; } label span.lists{ width: 100%; display: inline-block; position: absolute; top: 100%; left: 0px; box-shadow: 0px 0px 2px 0px #ccc; background-color:#fff; z-index: 9; } label span.item{ display: inline-block; width: 100%; border-bottom: 1px solid #ccc; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <form action="?" method="GET"> <label><span class="selected">select..</span> <span class="lists"></span> <select name="test"> <option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option> <option value="2" selected>item 2</option> <option value="3">item 3</option> <option value="4">item 4</option> </select> </label><br> <label><span class="selected">select..</span> <span class="lists"></span> <select name="test2"> <option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option> <option value="2">item 2</option> <option value="3" selected>item 3</option> <option value="4">item 4</option> </select> </label><br> <button>Submit</button> </form> </body> </html>
试试这个，可能会对你有帮助
[ https://codepen.io/venu9l/pen/jeNXzY][1]
你可以添加一个类并给出font-weight:700;在选择。但是通过使用这个，所有的文本将变成粗体。
可以应用于<option>元素的样式属性很少。
这是因为这种类型的元素是一个“替换元素”的例子。它们依赖于操作系统，不是HTML/浏览器的一部分。它不能通过CSS样式。
有一些替换的插件/库看起来像<select>，但实际上是由常规的HTML元素组成的，可以设置样式。
Bootstrap允许你通过data-content使用样式:
<select class="selectpicker">
<option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>
例子: https://silviomoreto.github.io/bootstrap-select/examples/
