Как придать стиль опции элемента html "select"?

Вот мой HTML:

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

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

TylerH
Редактировал вопрос 27-го марта 2019 в 2:05
Программирование
html css drop-down-menu
26-го августа 2011 в 6:02
26 просмотров
Комментарии к вопросу (2)
Решение

Существует всего несколько атрибутов стиля, которые могут быть применены к элементу ``.

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

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

Jacob
Редактировал ответ 30-го сентября 2019 в 9:58
Комментарии (8)

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

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

georgeawg
Редактировал ответ 2-го ноября 2019 в 8:10
Комментарии (6)

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

С помощью * CSS в теге можно укладывать нужным внутри коробки, которая рисуется системой.

Пример:

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

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

Комментарии (1)

Я нашел и используя это хороший пример укладки выбирает и варианты.Вы можете делать с этим выбрать все, что вы хотите.Вот [Скрипка][1]

в формате HTML


<select id="selectbox1">
    Select an option…
    Aye
    Eh
    Ooh
    Whoop

    Month…
    January
    February
    March
    April
    May
    June
    July
    August
    September
    October
    November
    December
Комментарии (4)

Похоже, я могу просто установить CSS для выбора в Хром напрямую. CSS и HTML-код, предоставленный ниже :

в 

.boldoption {
    font-weight: bold;
}

<select>
    Some normal-font option
    Another normal-font option
    Some bold option
HoldOffHunger
Редактировал ответ 18-го сентября 2018 в 3:29
Комментарии (5)

Здесь's некоторые способы стиль в <параметр> вместе с `<выберите> если вы're, используя Bootstrap и/или jQuery. Я понимаю, что это'т то, что оригинальный плакат просит, но я думал, я мог бы помочь другим, которые наткнуться на этот вопрос.

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

Загрузки выберите Библиотека (библиотека jQuery)

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

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

Пример:

[![Введите описание изображения здесь][2]][2]

[![Введите описание изображения здесь][3]][3]

[![Введите описание изображения здесь][4]][4]

Зависимости требует на jQuery В1.9.1+, загрузки, компонент Bootstrap В. dropdown.js и Bootstrap'ов в CSS

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

Демо: 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>


<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

<select class="selectpicker">
  Mustard
  Ketchup
  Relish
Katie
Редактировал ответ 12-го июня 2019 в 5:54
Комментарии (4)

Bootstrap можно использовать укладочные через данных содержание:


<select class="selectpicker">
  Relish
Комментарии (1)

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

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

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

Комментарии (1)

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

в 

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>

в

NVRM
Редактировал ответ 16-го мая 2018 в 8:26
Комментарии (0)

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

  • шрифт
  • цвет
  • шрифт-*
  • цвет фона

Также вы можете использовать пользовательский шрифт для индивидуальных В `<параметр> В тег, например любой шрифт Google](https://fonts.google.com/), материал иконки или другой значок шрифты из icomoon или так. (Что может пригодиться для селектора шрифт и т. д.)

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


    <select>
        a    ★★★
        b    ★★★★
Комментарии (3)

Это'с 2017 и можно ориентироваться на конкретные выберите Параметры. В моем проекте у меня есть таблица с класс=то"вариации" ПО, и выберите функции в ячейку таблицы тд=то"значение" ПО, и выбор есть ID выбрать#pa_color. Элемент Option также имеет класс возможность=то"прилагается" по (среди других классов теги). Если пользователь вошел в систему как оптовый покупатель, они могут увидеть все цветовые варианты. Но розничные покупатели не могут приобрести 2 цветовых вариантах, поэтому я'вэ отключил их

color 1
color 2

Он взял немного логики, но вот как я направила выберите функции отключены.

УСБ

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

При том, что мои варианты цвета видны только оптовым покупателям.

Комментарии (0)

На самом деле можно добавить :before и :After и стиль этих. По крайней мере, это's что-то

в 

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)

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




    <meta charset="UTF-8">
    Document
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



    <span class="selected">select..</span> <span class="lists"></span>
    <select name="test">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        item 2
        item 3
        item 4

        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        item 2
        item 3
        item 4
Комментарии (0)

Это's будет наверняка работать. Выберите вариант, вынесенное ОС не в HTML. Что's стиль потому УСБ не'эффект т.. как правило параметр {шрифт-размер : ценность ; цвет фона:стекла colorcode; границы-радиус:значение; } это будет работать, но мы можем'т настроить отступы, поля и т. д..

Ниже код 100% работает для настройки выберите тег взяты из [Этот пример][1]

в 

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>
    Select car:
    Audi
    BMW
    Citroen
    Ford
    Honda
    Jaguar
    Land Rover
    Mercedes
    Mini
    Nissan
    Toyota
    Volvo
nircraft
Редактировал ответ 9-го апреля 2019 в 3:16
Комментарии (1)

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

Например: в <опцию style="и шрифт-вес:смелые;цвет:#09С;" и>Вариант 1</вариант> Это позволит применить стили к данной в <параметр> элемент только.

Затем вы можете использовать немного JavaScript магии, чтобы применить встроенные стили, чтобы все в <параметр> элементов в в `<выбрать> тег вот так :

выберите ВАР = $(документ).метода getElementById(&#39;#выбрать-элемент-идентификатор&#39;)

опция вара = выбор.дети(' вариант-элемент-идентификатор#') `

вариант.в CSS(&#39;шрифт-вес&#39;, &#39;жирный&#39;)

вариант.в CSS(&#39;размер шрифта&#39;, &#39;значение 24px&#39;)

Вы также можете использовать <параметр. значение=" и на" отключен> <БР> </вариант> чтобы добавить разрыв строки между вариантами.

Комментарии (0)

Вы можете добавить класс и дает начертание шрифта:700; на выбор. Но с помощью этого весь текст станет жирным.

Комментарии (0)

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

Приведенный ниже пример стилизует (технически все) первую опцию красным цветом и, как только пользователь начнет взаимодействовать, удалит эту опцию (которая имеет значение="значение по умолчанию") и удалит класс, примененный к 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');
});
Комментарии (0)