Как стилизовать опцию html-элемента "select"?

Вот мой HTML:

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

Я хочу сделать название продукта (то есть "Product1", "Product2" и т.д.) Жирным, а его категории (например, электроника, спорт и т.д.) Курсивом, используя только CSS. Я нашел старый вопрос, в котором упоминалось, что невозможно использовать HTML и CSS, но, надеюсь, сейчас есть решение.

+134
26 авг. '11 в 18:02
источник поделиться
18 ответов

В общем, вы не можете. Этот элемент является примером "заменяемого элемента", они зависят от ОС и не являются частью HTML/браузера. Его нельзя стилизовать с помощью CSS.

Существуют сменные плагины/библиотеки, которые выглядят как <select> но на самом деле состоят из обычных элементов HTML которые МОГУТ быть стилизованы.

+145
26 авг. '11 в 18:04
источник

Связанные вопросы


Похожие вопросы

Нет, это невозможно, так как стиль для этих элементов обрабатывается пользовательской ОС. MSDN ответит на ваш вопрос здесь:

За исключением background-color и color, параметры стиля, применяемые к объекту стиля для элемента option, игнорируются.

+55
26 авг. '11 в 18:05
источник

Вы можете в некоторой степени стилизовать элементы элементов.

Используя тэг * CSS, вы можете стилизовать параметры внутри поля, которое нарисовано системой.

Пример:

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

Это будет выглядеть так:

enter image description here

+25
07 окт. '13 в 4:46
источник

Я нашел и использовал этот хороший пример стилизации выбранных и опций. Вы можете сделать это, чтобы выбрать все, что вы хотите. Вот Fiddle

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

});
+21
16 дек. '14 в 21:30
источник

Похоже, я могу просто установить CSS для select в Chrome напрямую. 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>
enter image description here
+6
28 апр. '16 в 12:24
источник

Вот несколько способов стилизовать <option> вместе с <select>. Вы все еще можете достичь цели стилизации каждого <option> отдельно, но, возможно, потребуется применить некоторый стиль и к <select>. Моя любимая библиотека - Bootstrap Select, упомянутая ниже.


Только CSS + HTML

css-only

Зависимости: только CSS + HTML, библиотеки и JS не нужны.

Совместимость: Все поддерживаемые браузеры, кроме IE8, не поддерживают border-radius, box-shadow и transform.

Демо: http://cssdeck.com/labs/styling-select-box-with-css3

Обратите внимание, что это стиль не только опции, но и выбора.

body, html {background:#444; text-align:center; padding:50px 0;}

/* The CSS */
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: #f8f8f8;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}

label {position:relative}
label:after {
    content:'<>';
    font:11px "Consolas", monospace;
    color:#aaa;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}
<label>
    <select>
        <option selected> Select Box </option>
        <option>Short Option</option>
        <option>This Is A Longer Option</option>
    </select>
</label>

Bootstrap Select Library (jquery)

Если вы уже используете bootstrap, вы можете попробовать библиотеку Bootstrap Select или библиотеку, указанную ниже (поскольку она имеет тему начальной загрузки).

Обратите внимание, что вы можете стилизовать весь элемент select или элементы option отдельно.

Примеры:

enter image description here

enter image description here

enter image description here

Зависимости: требуется jQuery v1.9. 1+, компонент Bootstrap, Bootstraps dropdown.js и CSS Bootstrap

Совместимость: не уверена, но bootstrap говорит, что "поддерживает последние стабильные выпуски всех основных браузеров и платформ"

Демонстрация: https://developer.snapappointments.com/bootstrap-select/examples/

.special {
  font-weight: bold !important;
  color: #fff !important;
  background: #bc0000 !important;
  text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

<select class="selectpicker">
  <option>Mustard</option>
  <option class="special">Ketchup</option>
  <option style="background: #5cb85c; color: #fff;">Relish</option>
</select>

Select2 (JS lib)

Там библиотека, которую вы можете использовать, называется Select2.

select2

Зависимости: Библиотека только JS + CSS + HTML (не требует JQuery).

Совместимость: IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10. 6+

Демо: https://select2.org/getting-started/basic-usage

Также доступна тема начальной загрузки.

Нет примера начальной загрузки:

$(function() {
  var $select = $('.select2');
  
  $select.select2({
    theme: 'paper'
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

<select class="select2 form-control" placeholder="Country">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

Пример начальной загрузки:

$(function() {
  var $select = $('.select2');
  
  $select.select2({
    theme: 'paper'
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/paper/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

<select class="select2 form-control" placeholder="Country">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

MDBootstrap ($ & Bootstrap & JQuery)

Если у вас есть дополнительные деньги, вы можете воспользоваться премиальной библиотекой MDBootstrap. (Это целый комплект пользовательского интерфейса, поэтому он не свет)

Это позволяет стилизовать элементы select и option с использованием дизайна Material.

enter image description here

Есть бесплатная версия, но она не позволит вам использовать симпатичный дизайн Material!

Зависимости: Bootstrap 4, JQuery,

Совместимость: "поддерживает последние стабильные выпуски всех основных браузеров и платформ".

Демонстрация: https://mdbootstrap.com/docs/jquery/forms/select/#color

+3
11 февр. '15 в 23:55
источник

Стандарт select не может быть оформлен, но посмотрите что-то вроде этого.

Естественно, в браузере клиента требуется включить JavaScript. Есть и другие подобные (вероятно, многие). Также могут быть некоторые HTML/CSS-трюки, которые не требуют JavaScript, но я еще не знаком с ними.

+3
04 дек. '17 в 10:04

Bootstrap позволяет использовать стиль с помощью содержимого данных:

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

Пример: https://silviomoreto.github.io/bootstrap-select/examples/

+3
17 нояб. '16 в 17:29
источник

Как уже упоминалось, единственный способ - использовать плагин, который заменяет функциональность <select>.

Список плагинов jQuery: http://plugins.jquery.com/tag/select/

Взгляните на пример с помощью плагина Select2: http://jsfiddle.net/swsLokfj/23/

+3
13 янв. '15 в 11:18
источник

Оставляя здесь быструю альтернативу, используя переключение классов на таблицу. Поведение очень похоже на выбор, но может быть в стиле с переходом, фильтрами и цветами, каждый из них по отдельности.

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>
+1
16 мая '18 в 4:18
источник

На самом деле вы можете добавить: до и: после и стиль. По крайней мере, это что-то

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;
}
0
16 окт. '17 в 14:40
источник

Это 2017, и возможно настроить таргетинг на определенные варианты выбора. В моем проекте у меня есть таблица с классом = "варианты", а опции выбора находятся в ячейке таблицы td = "значение", а в элементе выбора есть идентификатор # pa_color. Элемент option также имеет параметр class = "attach" (среди других тегов класса). Если пользователь вошел в систему как оптовый клиент, они могут видеть все параметры цвета. Но розничным клиентам не разрешено приобретать 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;
}

При этом параметры цвета отображаются только для оптовых покупателей.

0
28 авг. '17 в 22:04
источник

Это определенно будет работать. Опция выбора отображается ОС, а не HTML. Вот почему стиль CSS не действует, обычно option{font-size: value; background-color:colorCode; border-radius:value; } option{font-size: value; background-color:colorCode; border-radius:value; }
это будет работать, но мы не можем настроить отступы, поля и т.д.

Код ниже 100% работает, чтобы настроить тег выбора, взятый из этого примера

var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  /*for each element, create a new DIV that will act as the selected item:*/
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  x[i].appendChild(a);
  /*for each element, create a new DIV that will contain the option list:*/
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 1; j < selElmnt.length; j++) {
    /*for each option in the original select element,
    create a new DIV that will act as an option item:*/
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    c.addEventListener("click", function(e) {
        /*when an item is clicked, update the original select box,
        and the selected item:*/
        var y, i, k, s, h;
        s = this.parentNode.parentNode.getElementsByTagName("select")[0];
        h = this.parentNode.previousSibling;
        for (i = 0; i < s.length; i++) {
          if (s.options[i].innerHTML == this.innerHTML) {
            s.selectedIndex = i;
            h.innerHTML = this.innerHTML;
            y = this.parentNode.getElementsByClassName("same-as-selected");
            for (k = 0; k < y.length; k++) {
              y[k].removeAttribute("class");
            }
            this.setAttribute("class", "same-as-selected");
            break;
          }
        }
        h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
      /*when the select box is clicked, close any other select boxes,
      and open/close the current select box:*/
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
  });
}
function closeAllSelect(elmnt) {
  /*a function that will close all select boxes in the document,
  except the current select box:*/
  var x, y, i, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  for (i = 0; i < y.length; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < x.length; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);
/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family: Arial;
}
.custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
  background-color: DodgerBlue;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}
<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select car:</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
    <option value="6">Jaguar</option>
    <option value="7">Land Rover</option>
    <option value="8">Mercedes</option>
    <option value="9">Mini</option>
    <option value="10">Nissan</option>
    <option value="11">Toyota</option>
    <option value="12">Volvo</option>
  </select>
</div>
0
20 окт. '18 в 7:26
источник

Этот элемент отображается операционной системой, а не 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]
0
27 сент. '18 в 15:12
источник

Некоторые свойства могут быть написаны для тега <option>:

  • font-family
  • color
  • font-*
  • background-color

Также вы можете использовать собственный шрифт для отдельного тега <option>, например, шрифт google, Значки материалов или другие значки из icomoon или аналогичные. (Это может пригодиться для селекторов шрифтов и т.д.)

Учитывая это, вы можете создать стек шрифтов и добавить значки в теги <option>, например.

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

где берется из Icons, а остальное - от Roboto.

Обратите внимание, что пользовательские шрифты не работают для мобильного выбора.

-1
15 авг. '16 в 21:15
источник

Вы можете использовать встроенные стили, чтобы добавить стиль custome в теги <option>.

Например: <option style="font-weight:bold;color:#09C;">Option 1</option> Это применит стили только к этому элементу <option>.

Затем вы можете использовать немного javascript-магии для применения встроенных стилей ко всем элементам <option> в <select> например:

var select = $(document).getElementById('#select-element-id')

var option = select.children('#option-element-id')

option.css('font-weight', 'bold')

option.css('font-size', '24px')

Вы также можете использовать <option value="" disabled> <br> </option> чтобы добавить разрыв строки между параметрами.

-1
19 июл. '18 в 14:30
источник

Вы можете добавить класс и дает font-weight: 700; в варианте. Но благодаря этому весь текст станет жирным.

-1
28 нояб. '18 в 6:25
источник

Как указано выше, не совсем возможно; однако, если вы просто хотите создать начальное состояние для чего-то вроде опции "Выбрать продукт...", прежде чем пользователь взаимодействует с этим полем, вы можете сделать что-то вроде ниже -

В приведенных ниже стилях стилей (технически все) первый вариант красного цвета и один раз, когда пользователь взаимодействует, удалит эту опцию (которая имеет value = "defaultValue" ) и удалит класс, примененный к выбору. Вы также можете применять другие параметры, кроме цвета, но они будут влиять только на измененное поле, а не на список.

CSS

.default-value{
  color: red;
}

JQuery

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

$("select").bind("focus", function () {
  $(this).children('option[value="defaultValue"]').remove();
  $(this).removeClass('default-value');
});
-3
27 июл. '12 в 22:47
источник

Посмотрите другие вопросы по меткам или Задайте вопрос