如何设置html“select”选项的样式?

Here's my html :

这是我的html:

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

Now, what I want is to make the name of the product (i.e. 'Product1', 'Product2' , etc) bold, and its categories(viz. Electronics, Sports, etc) italicized, using css only. I found a similar question about an year old, but as mentioned there, it's just not possible using HTML and CSS. Hopefully, there's a solution now. Any hint, quirk or trick would be appreciated. Thanks.

现在，我想要的是产品的名称(例如。“Product1”、“Product2”等)加粗，以及它的类别(即。电子，体育等)斜体字，只使用css。我发现了一个类似的关于一岁的问题，但是正如上面提到的，使用HTML和CSS是不可能的。希望现在有一个解决方案。任何暗示、怪癖或诡计都将受到感激。谢谢。

13 个解决方案

#1

In general, you can't. This element is rendered by the OS, not HTML. It cannot be styled via CSS. There are replacement plug-ins that look like a <select> but are actually composed of regular HTML elements that CAN be styled.

一般来说,你不能。这个元素是由操作系统呈现的，而不是HTML。它不能通过CSS进行样式化。有一些替代插件看起来像，但实际上是由可以设置样式的常规HTML元素组成的。

#2

No, it's not possible, as the styling for these elements is handled by the user's OS. MSDN will answer your question here:

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

Except for background-color and color, style settings applied through the style object for the option element are ignored.

除了背景颜色和颜色外，通过选项元素的样式对象应用的样式设置将被忽略。

#3

You can style the option elements to some extent.

您可以在某种程度上对选项元素进行样式化。

Using the * CSS tag you can style the options inside the box that is drawn by the system.

使用* CSS标记，您可以在系统绘制的框中对选项进行样式化。

Example:

例子:

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

That will look like this:

看起来是这样的:

#4

I found and using this good example of styling the selects and options.You can do with this select all you want.Here is the Fiddle

我找到并使用了这个设计选择和选项样式的好例子。您可以使用这个select all You want。这是小提琴

html

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

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

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

});

#5

EDIT: I found this awesome library that replaces the standard "select" element in HTML with awesomely styled "select" elements: Select2 - https://select2.github.io/examples.html

编辑:我找到了这个很棒的库，它将HTML中的标准“选择”元素替换为非常漂亮的样式“选择”元素:Select2 - https://select2.github.io/examples.html

---

In 2011 you may have not been able to style the select "option" element, but it's 2015! You can totally style it! I don't understand some of the answers from 2014 saying you can't style it! CSS3 works wonders. I tried this in my own code, and the pull down "options" were styled just like how you would style the "select"

在2011年，您可能还没有能够设计select“选项”元素的样式，但是现在是2015年!你完全可以设计它!我不理解2014年的一些回答，说你不能设计它!CSS3能创造奇迹。我在自己的代码中尝试过，下拉“选项”的样式与“select”的样式一样

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

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

Here's some example code!

这里有一些示例代码!

select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: black;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

#6

Works for me:

工作对我来说:

.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>

#7

As already mentioned, the only way is to use a plugin that replaces <select> functionality.

正如前面提到的，唯一的方法是使用一个插件来替代功能。

A list of jQuery plugins: http://plugins.jquery.com/tag/select/

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

Take a look at the example using Select2 plugin: http://jsfiddle.net/swsLokfj/23/

使用Select2插件查看示例:http://jsfiddle.net/swsLokfj/23/

#8

Bootstrap allows you to use styling via data-content:

Bootstrap允许您通过数据内容使用样式:

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

Example: https://silviomoreto.github.io/bootstrap-select/examples/

例如:https://silviomoreto.github.io/bootstrap-select/examples/

#9

Leaving here a quick alternative, using class toggle on a table. The behavior is very similar than a select, but can be styled with transition, filters and colors, each children individually.

在这里留下一个快速的选择，使用类toggle放在表上。该行为与select非常相似，但是可以使用转换、过滤器和颜色，每个子元素单独设置。

function toggleSelect(){ 
 if (store.classList[0] === "hidden"){
    store.classList = "viewfull"
  }
  else {
    store.classList = "hidden"
  }
}

#store {
  overflow-y: scroll;
  max-height: 110px;
  max-width: 50%
 }
 
.hidden {
  display: none
 }
 
.viewfull {
  display: block
}

#store :nth-child(4) {
  background-color: lime;
}

span {font-size:2rem;cursor:pointer}

<span onclick="toggleSelect()">⮋</span>
 <div id="store" class="hidden">
 
<ul><li><a href="#keylogger">keylogger</a></li><li><a href="#1526269343113">1526269343113</a></li><li><a href="#slow">slow</a></li><li><a href="#slow2">slow2</a></li><li><a href="#Benchmark">Benchmark</a></li><li><a href="#modal">modal</a></li><li><a href="#buma">buma</a></li><li><a href="#1526099371108">1526099371108</a></li><a href="#1526099371108o">1526099371108o</a></li><li><a href="#pwnClrB">pwnClrB</a></li><li><a href="#stars%20u">stars%20u</a></li><li><a href="#pwnClrC">pwnClrC</a></li><li><a href="#stars ">stars </a></li><li><a href="#wello">wello</a></li><li><a href="#equalizer">equalizer</a></li><li><a href="#pwnClrA">pwnClrA</a></li></ul>
 
 </div>

#10

Some properties can be styled for<option> tag:

有些属性可以设置为标签:

• font-family
• 字体类型
• color
• 颜色
• font-*
• 字体- *
• background-color
• 背景颜色

Also you can use custom font for individual <option> tag, for example any google font, Material Icons or other icon fonts from icomoon or alike. (That may come handy for font selectors etc.)

您还可以为单个的 <选项> 标记使用自定义字体，例如任何谷歌字体、材质图标或其他icomoon或类似的图标字体。(这可能对字体选择器等有用)

Considering that, you can create font-family stack and insert icons in <option> tags, eg.

考虑到这一点，您可以创建font-family堆栈并在标记中插入图标，例如。

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

where ★ is taken from Icons and the rest is from Roboto.

★在哪里来自图标和其他来自Roboto。

Note though that custom fonts do not work for mobile select.

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

#11

It's 2017 and it IS possible to target specific select options. In my project I have a table with a class="variations", and the select options are in the table cell td="value", and the select has an ID select#pa_color. The option element also has a class option="attached" (among other class tags). If a user is logged in as a wholesale customer, they can see all of the color options. But retail customers are not allowed to purchase 2 color options, so I've disabled them

现在是2017年，可以针对特定的选择选项。在我的项目中，我有一个具有class="variation "的表，select选项位于表单元格td="value"中，select具有ID select#pa_color。选项元素还有一个class选项="attach "(在其他类标签中)。如果用户作为一个批发客户登录，他们可以看到所有的颜色选项。但是零售客户不允许购买两个颜色选项，所以我禁用了它们

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

It took a little logic, but here is how I targeted the disabled select options.

这需要一点逻辑，但以下是针对禁用的select选项的方法。

CSS

CSS

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

With that, my color options are only visible to wholesale customers.

这样，我的颜色选项只对批发客户可见。

#12

Actually you can add :before and :after and style those. At least it's something

实际上您可以添加:before和:after和style这些。至少它的东西

option{
    font-size:18px;
    background-color:#ffffff;
}
option:before{
    content: ">";
    font-size:20px;
    display:none;
    padding-right:10px;
    padding-left:5px;
    color:#fff;
}
option:hover:before{
    display:inline;
}

#13

Like stated above, not really possible; however, if you just want to style the initial state for something like a 'Select Product...' option before a user interacts with the field, you could do something like below --

如上所述，不可能;但是，如果您只是想为“Select Product”之类的东西设计初始状态……在用户与字段交互之前，您可以做如下操作—

The below example styles (technically all) the first option red and once a user interacts will remove that option (which has the value="defaultValue" set) and remove the class applied to the select. You can apply other options besides color as well, but they will only affect the field once changed, not the list view.

下面的示例样式(技术上是所有的)第一个选项是红色，一旦用户交互将删除该选项(它具有值=“defaultValue”集)，并删除应用于select的类。除了颜色之外，您还可以应用其他选项，但它们只会在更改后影响字段，而不会影响list视图。

CSS

CSS

.default-value{
  color: red;
}

jQuery

jQuery

$("select").addClass('default-value');

$("select").bind("focus", function () {
  $(this).children('option[value="defaultValue"]').remove();
  $(this).removeClass('default-value');
});