Как стилизовать вариант html "select"?
вот мой html:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
теперь я хочу, чтобы название продукта (т. е. "Product1", "Product2" и т. д.) было жирным, а его категории(т. е. Электроника, Спорт и т. д.) курсивом, используя только css. Я нашел аналогичный вопрос о годе, но, как упоминалось там, это просто невозможно с помощью HTML и CSS. Надеюсь, теперь есть решение. Любой намек, причуда или трюк будут оценены. Спасибо.
15 ответов
В общем, вы не можете. Этот элемент отображается ОС, а не HTML
. Его нельзя стилизовать через CSS
. Есть сменные плагины, которые выглядят как <select>
но на самом деле состоят из регулярных HTML
элементов CAN быть стилизованы.
нет, это невозможно, так как стиль для этих элементов обрабатывается ОС пользователя. MSDN ответит на ваш вопрос здесь:
за исключением
background-color
иcolor
, параметры стиля, применяемые через объект style для элемента option, игнорируются.
вы можете в некоторой степени стилизовать элементы опции.
используя тег * CSS, вы можете стилизовать параметры внутри поля, которое рисуется системой.
пример:
#ddlProducts *
{
border-radius:15px;
background-color:red;
}
Это будет выглядеть так:
Я нашел и использовал этот хороший пример стиля выбора и опций.Вы можете сделать с этим выбрать все, что вы хотите.Вот это Скрипка
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();
});
});
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;
}
Как уже упоминалось, единственный способ-использовать плагин, который заменяет <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');
});