如何样式的html“选择”元素的选项?

这是我的HTML:

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

我想让产品的名称(即。'Product1'， 'Product2'，等等)，以及它的类别(即。电子，体育等)斜体，只使用CSS。我发现了一个老问题，提到这是不可能使用HTML和CSS，但希望，现在有一个解决方案。

当前回答

即使没有太多的属性要改变，但你可以实现以下样式只有css:

.options { 边框:1px solid #e5e5e5; 填充:10 px; ｝选择{ 字体大小:14 px; 边界:没有; 宽度:100%; 背景:白色; ｝ < div class = "选项”> <选择> 苹果<选项值= " " > < /选项> 香蕉<选项值= " " > < /选项> 橙色<选项值= " " > < /选项> 芒果<选项值= " " > < /选项> < /选择> < / div >

2019-12-06 08:20:54

其他回答

可以应用于<option>元素的样式属性很少。

这是因为这种类型的元素是一个“替换元素”的例子。它们依赖于操作系统，不是HTML/浏览器的一部分。它不能通过CSS样式。

有一些替换的插件/库看起来像<select>，但实际上是由常规的HTML元素组成的，可以设置样式。

2011-08-26 18:04:39

正如已经提到的，唯一的方法是使用一个插件来替换<select>功能。

jQuery插件列表:http://plugins.jquery.com/tag/select/

看一下使用Select2 plugin: http://jsfiddle.net/swsLokfj/23/的例子

2015-01-13 11:18:10

不，这是不可能的，因为这些元素的样式是由用户的操作系统处理的。MSDN将在这里回答你的问题:

除了background-color和color，通过style对象应用于option元素的样式设置将被忽略。