如何设置html选项的样式；选择"；元素？

这是我的HTML：

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

产品1：电子产品
产品2：运动

---

我想将产品名称（即“产品1”、“产品2”等）加粗，并将其类别（即电子、体育等）斜体化，仅使用CSS。我发现了一个老问题，其中提到使用HTML和CSS是不可能的，但希望现在有一个解决方案。

只有几个样式属性可以应用于

元素

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

---

有一些替换插件/库看起来像

，但实际上由常规HTML元素组成，这些元素可以设置样式。

不，这是不可能的，因为这些元素的样式由用户的操作系统处理

除了

背景色

和

颜色

，通过选项元素的样式对象应用的样式设置将被忽略

---

可以在某种程度上设置选项元素的样式

使用

*

CSS选择器，您可以在系统绘制的框内设置选项的样式

例如：

#ddlProducts *
{
 border-radius: 15px;
 background-color: red;
}

看起来是这样的：

---

我找到并使用了这个很好的选择和选项样式示例。您可以使用这个选择来完成所有您想要的操作。下面是

html

<select id="selectbox1">
    <option value="">Select an option&hellip;</option>
    <option value="aye">Aye</option>
    <option value="eh">Eh</option>
    <option value="ooh">Ooh</option>
    <option value="whoop">Whoop</option>
</select>
<select id="selectbox2">
    <option value="">Month&hellip;</option>
    <option value="january">January</option>
    <option value="february">February</option>
    <option value="march">March</option>
    <option value="april">April</option>
    <option value="may">May</option>
    <option value="june">June</option>
    <option value="july">July</option>
    <option value="august">August</option>
    <option value="september">September</option>
    <option value="october">October</option>
    <option value="november">November</option>
    <option value="december">December</option>
</select>

JS

// Iterate over each select element
$('select').each(function () {

    // Cache the number of options
    var $this = $(this),
        numberOfOptions = $(this).children('option').length;

    // Hides the select element
    $this.addClass('s-hidden');

    // Wrap the select element in a div
    $this.wrap('<div class="select"></div>');

    // Insert a styled div to sit over the top of the hidden select element
    $this.after('<div class="styledSelect"></div>');

    // Cache the styled div
    var $styledSelect = $this.next('div.styledSelect');

    // Show the first select option in the styled div
    $styledSelect.text($this.children('option').eq(0).text());

    // Insert an unordered list after the styled div and also cache the list
    var $list = $('<ul />', {
        'class': 'options'
    }).insertAfter($styledSelect);

    // Insert a list item into the unordered list for each select option
    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    // Cache the list items
    var $listItems = $list.children('li');

    // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
    $styledSelect.click(function (e) {
        e.stopPropagation();
        $('div.styledSelect.active').each(function () {
            $(this).removeClass('active').next('ul.options').hide();
        });
        $(this).toggleClass('active').next('ul.options').toggle();
    });

    // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
    // Updates the select element to have the value of the equivalent option
    $listItems.click(function (e) {
        e.stopPropagation();
        $styledSelect.text($(this).text()).removeClass('active');
        $this.val($(this).attr('rel'));
        $list.hide();
        /* alert($this.val()); Uncomment this for demonstration! */
    });

    // Hides the unordered list when clicking outside of it
    $(document).click(function () {
        $styledSelect.removeClass('active');
        $list.hide();
    });

});

table.variations td.value select#pa_color option.attached:disabled {
display: none !important;
}

//迭代每个select元素
$（'select'）。每个（函数（）{
//缓存选项的数量
变量$this=$（this），
numberOfOptions=$（this）.children（'option'）.length；
//隐藏选择元素
$this.addClass（'s-hidden'）；
//将select元素包装在div中
$this.wrap（“”）；
//在隐藏的select元素的顶部插入一个样式化的div
$this.after（“”）；
//缓存样式化的div
var$styledSelect=$this.next（'div.styledSelect'）；
//在样式化的div中显示第一个select选项
$styledSelect.text（$this.children（'option'）.eq（0.text（））；
//在样式化div之后插入无序列表，并缓存该列表
var$list=$（“
”{
“类”：“选项”
}).insertAfter（$styledSelect）；
//为每个选择选项在无序列表中插入一个列表项
对于（var i=0；i”{
text:$this.children（'option'）.eq（i）.text（），
rel:$this.children（'option'）.eq（i）.val（）
}).附件（$清单）；
}
//缓存列表项
var$listItems=$list.children（'li'）；
//单击样式化的div时显示无序列表（如果再次单击该div，也会将其隐藏）
$styledSelect.单击（函数（e）{
e、 停止传播（）；
$（'div.styledSelect.active'）。每个（函数（）{
$（this.removeClass（'active'）.next（'ul.options'）.hide（）；
});
$（this.toggleClass（'active'）.next（'ul.options'）.toggle（）；
});
//单击列表项时隐藏无序列表，并更新样式化div以显示所选列表项
//更新选择元素，使其具有等效选项的值
$listItems。单击（函数（e）{
e、 停止传播（）；
$styledSelect.text（$（this.text（））.removeClass（'active'）；
$this.val（$（this.attr（'rel'））；
$list.hide（）；
/*警报（$this.val（））；取消对此的注释以进行演示*/
});
//在无序列表外单击时隐藏无序列表
$（文档）。单击（函数（）{
$styledSelect.removeClass（'active'）；
$list.hide（）；
});
});

如前所述，唯一的方法是使用一个插件来替代

功能

jQuery插件列表：

---

使用

选择2

插件查看示例：

如果您使用的是引导和/或jquery，这里有一些方法可以将

与

一起设置样式。我知道这不是最初的海报所要求的，但我想我可以帮助那些偶然发现这个问题的人

您仍然可以实现分别设置每个

样式的目标，但可能还需要对

应用一些样式。我最喜欢的是下面提到的“引导选择”库

---

引导选择库（jquery） 如果您已经在使用引导，可以尝试库或下面的库（因为它有一个引导主题）

请注意，您可以分别设置整个

选择

元素或

选项

元素的样式

示例：

依赖项：需要jQueryv1.9.1+、Bootstrap、Bootstrap的dropdown.js组件和Bootstrap的CSS

兼容性：不确定，但bootstrap说它“支持所有主要浏览器和平台的最新稳定版本”

演示：

.special{
字体大小：粗体！重要；
颜色：#fff！重要；
背景：#bc0000！重要；
文本转换：大写；
}

芥末
番茄酱
喜欢

似乎我可以直接在Chrome中为

选择设置CSS。下面提供了CSS和HTML代码：


.boldoption{
字体大小：粗体；
}

一些普通字体选项
另一个普通字体选项
一些大胆的选择
可以为
标记设置某些属性的样式：


字体系列
color
font-*
背景色

此外，您还可以为单个的
标记使用自定义字体，例如任意或类似的其他图标字体。（这对于字体选择器等可能很方便）

考虑到这一点，您可以创建字体族堆栈并在
标记中插入图标，例如

    <select>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">a    ★★★</option>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">b    ★★★★</option>
    </select>


A.★★★
B★★★★
<select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>

<option class="attached" disabled>color 1</option>
<option class="attached" disabled>color 2</option>

table.variations td.value select#pa_color option.attached:disabled {
display: none !important;
}