Как стилизовать вариант html "select"?

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

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

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

используя тег * 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>

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

});

EDIT: я нашел эту удивительную библиотеку, которая заменяет стандартный элемент "select" в HTML потрясающе стилизованными элементами "select":Select2 - https://select2.github.io/examples.html

в 2011 году вы, возможно, не смогли создать стиль элемента select "option", но это 2015! Вы можете полностью стиль его! Я не понимаю некоторых ответов с 2014 года, говоря, что вы не можете его стиль! С помощью CSS3 творит чудеса. Я пробовал это в себе. код, и выпадающие " параметры "были оформлены так же, как вы бы стиль"select"

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

вот пример кода!

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

кажется, я могу просто установить 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>

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

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

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

Bootstrap позволяет использовать стиль через data-content:

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

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

оставляя здесь быструю альтернативу, используя переключатель класса на столе. Поведение очень похоже на 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>

этот элемент отображается ОС, а не 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]

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

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

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

учитывая это, вы можете создайте стек font-family и вставьте значки в <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.

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

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

С этим мои варианты цвета видны только оптовым клиентам.

на самом деле вы можете добавить: before и: after и стиль. По крайней мере, хоть что-то!--2-->

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

вы можете использовать встроенные стили для добавления стиля 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> в добавьте разрыв между опциями.

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

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

в CSS

.default-value{
  color: red;
}

jQuery

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

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