Вот мой HTML:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
Я хочу сделать название продукта (то есть "Product1", "Product2" и т.д.) Жирным, а его категории (например, электроника, спорт и т.д.) Курсивом, используя только CSS. Я нашел старый вопрос, в котором упоминалось, что невозможно использовать HTML и CSS, но, надеюсь, сейчас есть решение.
Существует только несколько атрибутов стиля, которые можно применить к элементу <option>.
Это потому, что этот тип элемента является примером "замененного элемента". Они зависят от ОС и не являются частью HTML/браузера. Его нельзя стилизовать с помощью CSS.
Существуют сменные подключаемые модули/библиотеки, которые выглядят как <select>, но на самом деле состоят из обычных элементов HTML, которые можно МОЖЕТ стилизовать.
Нет, это невозможно, так как стиль для этих элементов обрабатывается пользовательской ОС. MSDN ответит на ваш вопрос здесь:
За исключением
background-colorиcolor, параметры стиля, применяемые к объекту стиля для элемента option, игнорируются.
Вы можете в некоторой степени стилизовать элементы элементов.
Используя тэг * CSS, вы можете стилизовать параметры внутри поля, которое нарисовано системой.
Пример:
#ddlProducts *
{
border-radius:15px;
background-color:red;
}
Это будет выглядеть так:
Я нашел и использовал этот хороший пример стилизации выбранных и опций. Вы можете сделать это, чтобы выбрать все, что вы хотите. Вот Fiddle
HTML
<select id="selectbox1">
<option value="">Select an option…</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…</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();
});
});
Похоже, я могу просто установить 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>Вот несколько способов стилизовать <option> вместе с <select>, если вы используете Bootstrap и/или jquery. Я понимаю, что это не то, о чем просит оригинальный постер, но я подумал, что смогу помочь другим, кто наткнулся на этот вопрос.
Вы все еще можете достичь цели стилизации каждого <option> по отдельности, но, возможно, потребуется применить некоторый стиль и к <select>. Моя любимая библиотека - Bootstrap Select, упомянутая ниже.
Если вы уже используете bootstrap, вы можете попробовать Bootstrap Select library или указанную ниже библиотеку (поскольку она имеет тему начальной загрузки).
Обратите внимание, что вы можете стилизовать весь элемент select или элементы option отдельно.
Примеры:
Зависимости: требуется jQuery v1.9. 1+, Bootstrap, компонент Bootstraps dropdown.js и Bootstrap CSS
Совместимость: нет уверенности, но 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/[email protected]/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>Стандарт select не может быть оформлен, но посмотрите что-то вроде этого.
Естественно, в браузере клиента требуется включить JavaScript. Есть и другие подобные (вероятно, многие). Также могут быть некоторые HTML/CSS-трюки, которые не требуют JavaScript, но я еще не знаком с ними.
Как уже упоминалось, единственный способ - использовать плагин, который заменяет функциональность <select>.
Список плагинов jQuery: http://plugins.jquery.com/tag/select/
Взгляните на пример с помощью плагина Select2: http://jsfiddle.net/swsLokfj/23/
Bootstrap позволяет использовать стиль с помощью содержимого данных:
<select class="selectpicker">
<option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>
Пример: https://silviomoreto.github.io/bootstrap-select/examples/
Оставляя здесь быструю альтернативу, используя переключение классов на таблицу. Поведение очень похоже на выбор, но может быть в стиле с переходом, фильтрами и цветами, каждый из них по отдельности.
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>Это 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;
}
При этом параметры цвета отображаются только для оптовых покупателей.
На самом деле вы можете добавить: до и: после и стиль. По крайней мере, это что-то
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;
}Этот элемент отображается операционной системой, а не 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> Это определенно будет работать. Опция выбора отображается ОС, а не 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>Некоторые свойства могут быть написаны для тега <option>:
font-familycolorfont-*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.
Обратите внимание, что пользовательские шрифты не работают для мобильного выбора.
Вы можете использовать встроенные стили, чтобы добавить стиль 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> чтобы добавить разрыв строки между параметрами.
Вы можете добавить класс и дает font-weight: 700; в варианте. Но благодаря этому весь текст станет жирным.
Как указано выше, не совсем возможно; однако, если вы просто хотите создать начальное состояние для чего-то вроде опции "Выбрать продукт...", прежде чем пользователь взаимодействует с этим полем, вы можете сделать что-то вроде ниже -
В приведенных ниже стилях стилей (технически все) первый вариант красного цвета и один раз, когда пользователь взаимодействует, удалит эту опцию (которая имеет 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');
});