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

Question

这是我的HTML:

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

现在,我想要的是将产品的名称(即'Product1','Product2'等)加粗,并使用css将其类别(即电子,运动等)斜体化.我发现了一个关于一岁的类似问题,但正如那里提到的那样,使用HTML和CSS是不可能的.希望现在有一个解决方案.任何提示,怪癖或技巧将不胜感激.谢谢.

Answer 1

一般来说,你不能.此元素是"替换元素"的示例,这些元素与操作系统相关,不属于HTML /浏览器.它不能通过风格<option>.

有更换插件/看起来像一个图书馆CSS实际上是由正规的,但<select>该元素CAN样式.

Answer 2

不,这是不可能的,因为这些元素的样式由用户的操作系统处理.MSDN将在此处回答您的问题:

除了background-color和之外color,将忽略通过选项元素的样式对象应用的样式设置.

Answer 3

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

使用*CSS标记,您可以设置系统绘制的框内的选项样式.

例:

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

这将是这样的:

Answer 4

我发现并使用了这个选择和选项样式的好例子.你可以用这个选择所有你想做的.这就是小提琴

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>

CSS

body {
    padding:50px;
    background-color:white;
}
.s-hidden {
    visibility:hidden;
    padding-right:10px;
}
.select {
    cursor:pointer;
    display:inline-block;
    position:relative;
    font:normal 11px/22px Arial, Sans-Serif;
    color:black;
    border:1px solid #ccc;
}
.styledSelect {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:white;
    padding:0 10px;
    font-weight:bold;
}
.styledSelect:after {
    content:"";
    width:0;
    height:0;
    border:5px solid transparent;
    border-color:black transparent transparent transparent;
    position:absolute;
    top:9px;
    right:6px;
}
.styledSelect:active, .styledSelect.active {
    background-color:#eee;
}
.options {
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    z-index:999;
    margin:0 0;
    padding:0 0;
    list-style:none;
    border:1px solid #ccc;
    background-color:white;
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
}
.options li {
    padding:0 6px;
    margin:0 0;
    padding:0 10px;
}
.options li:hover {
    background-color:#39f;
    color:white;
}

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();
    });

});

Answer 5

好像我可以select直接在Chrome中设置CSS .下面提供的CSS和HTML代码:

.boldoption {
	font-weight: bold;
}

<select>
	<option>Some normal-font option</option>
	<option>Another normal-font option</option>
	<option class="boldoption">Some bold option</option>
</select>

Answer 6

<option>一些属性可以为标签设置样式：

\n\n

\n
• font-family
\n
• color
\n
• font-*
\n
• background-color
\n

\n\n

您还可以为单个<option>标签使用自定义字体，例如任何google 字体、Material Icons或来自icomoon等的其他图标字体。（这对于字体选择器等可能会很方便）

\n\n

考虑到这一点，您可以创建字体系列堆栈并在<option>标签中插入图标​​，例如。

\n\n

    <select>\n        <option style="font-family: \'Icons\', \'Roboto\', sans-serif;">a    \xe2\x98\x85\xe2\x98\x85\xe2\x98\x85</option>\n        <option style="font-family: \'Icons\', \'Roboto\', sans-serif;">b    \xe2\x98\x85\xe2\x98\x85\xe2\x98\x85\xe2\x98\x85</option>\n    </select>\n

\n\n

\xe2\x98\x85取自何处Icons，其余取自Roboto。

\n\n

请注意，自定义字体不适用于移动选择。

\n

Answer 7

编辑:我发现这个令人敬畏的库,用HTML中的标准"select"元素取代了非常棒的"select"元素:Select2 - https://select2.github.io/examples.html

在2011年,您可能无法设置选择"选项"元素的样式,但它是2015年!你可以完全风格化!我不明白2014年的一些答案,说你不能造型!CSS3创造奇迹.我在我自己的代码中尝试了这个,并且下拉"选项"的样式就像你如何设计"选择"一样

http://cssdeck.com/labs/styling-select-box-with-css3

这是一些示例代码!

.special {
  font-weight: bold !important;
  color: #fff !important;
  background: #bc0000 !important;
  text-transform: uppercase;
}