Inilah HTML saya:

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

Saya ingin membuat nama produk (yaitu 'Product1', 'Product2', dll) tebal, dan kategorinya (yaitu Elektronik, Olahraga, dll) dicetak miring, menggunakan CSS saja. Saya menemukan pertanyaan lama yang menyebutkan bahwa tidak mungkin menggunakan HTML dan CSS, tetapi mudah-mudahan, ada solusinya sekarang.

Hanya ada beberapa atribut gaya yang dapat diterapkan pada suatu <option>elemen.

Ini karena jenis elemen ini adalah contoh dari "elemen yang diganti". Mereka tergantung pada OS dan bukan bagian dari HTML / browser. Itu tidak dapat ditata melalui CSS.

Ada plug-in / perpustakaan pengganti yang terlihat seperti <select>tetapi sebenarnya terdiri dari HTMLelemen reguler yang BISA ditata.

Tidak, itu tidak mungkin, karena penataan untuk elemen ini ditangani oleh OS pengguna. MSDN akan menjawab pertanyaan Anda di sini :

Kecuali untuk background-colordan color, pengaturan gaya yang diterapkan melalui objek gaya untuk elemen opsi diabaikan.

Anda dapat menata elemen opsi hingga batas tertentu.

Menggunakan tag * CSS Anda dapat mengatur gaya opsi di dalam kotak yang ditarik oleh sistem.

Contoh:

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

Itu akan terlihat seperti ini:

Saya menemukan dan menggunakan contoh penataan pilihan dan opsi yang bagus ini. Anda dapat melakukan ini dengan memilih semua yang Anda inginkan. Berikut adalah 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();
    });

});

Berikut adalah beberapa cara untuk menata <option>bersama dengan <select>jika Anda menggunakan Bootstrap dan / atau jquery. Saya mengerti ini bukan apa yang diminta poster asli tetapi saya pikir saya bisa membantu orang lain yang tersandung pada pertanyaan ini.

Anda masih dapat mencapai tujuan penataan masing <option>- masing secara terpisah, tetapi mungkin perlu menerapkan beberapa gaya <select>juga. Favorit saya adalah pustaka "Bootstrap Select" yang disebutkan di bawah ini.

Bootstrap Select Library (jquery)

Jika Anda sudah menggunakan bootstrap, Anda dapat mencoba pustaka Bootstrap Select atau pustaka di bawah ini (karena memiliki tema bootstrap).

Perhatikan bahwa Anda dapat menata seluruh selectelemen, atau optionelemen secara terpisah.

Contoh :

Dependensi : memerlukan jQuery v1.9.1 +, Bootstrap , komponen dropdown.js Bootstrap, dan CSS Bootstrap

Kompatibilitas : Tidak yakin, tetapi bootstrap mengatakan "mendukung rilis terbaru dan stabil dari semua browser dan platform utama"

Demo : 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)

Ada perpustakaan yang bisa Anda gunakan bernama Select2 .

Dependensi : Perpustakaan hanya JS + CSS + HTML (tidak memerlukan JQuery).

Kompatibilitas : IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+

Demo : https://select2.org/getting-started/basic-usage

Ada juga tema bootstrap yang tersedia.

Tidak ada contoh Bootstrap:

$(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>

Contoh bootstrap:

$(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)

Jika Anda memiliki uang tambahan, Anda dapat menggunakan MDBootstrap perpustakaan premium . (Ini adalah keseluruhan Kit UI , jadi tidak ringan)

Ini memungkinkan Anda untuk menata elemen pilih dan opsi Anda menggunakan desain Material .

Ada versi gratis, tetapi tidak memungkinkan Anda untuk menggunakan desain Material yang cantik!

Dependensi : Bootstrap 4 , JQuery,

Kompatibilitas : "mendukung rilis terbaru dan stabil dari semua browser dan platform utama."

Demo : https://mdbootstrap.com/docs/jquery/forms/select/#color

Sepertinya saya bisa mengatur CSS untuk selectdi Chrome secara langsung. CSS dan kode HTML disediakan di bawah ini:

.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>

Seperti yang telah disebutkan, satu-satunya cara adalah menggunakan plugin yang menggantikan <select>fungsi.

Daftar plugin jQuery: http://plugins.jquery.com/tag/select/

Lihatlah contoh menggunakan Select2plugin: http://jsfiddle.net/swsLokfj/23/

Bootstrap memungkinkan Anda menggunakan gaya melalui konten data:

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

Contoh: https://silviomoreto.github.io/bootstrap-select/examples/

Beberapa properti dapat ditata untuk <option>tag:

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

Anda juga dapat menggunakan font khusus untuk setiap <option>tag, misalnya font google apa saja , Material Icons atau font ikon lainnya dari icomoon atau sama. (Itu mungkin berguna untuk pemilih font dll.)

Mempertimbangkan itu, Anda dapat membuat tumpukan font-family dan menyisipkan ikon dalam <option>tag, misalnya.

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

dari mana ★diambil Iconsdan sisanya dari Roboto.

Perhatikan bahwa font khusus tidak berfungsi untuk seluler pilih.

Sebenarnya Anda dapat menambahkan: sebelum dan: setelah dan gaya itu. Setidaknya itu sesuatu

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

Ini tahun 2017 dan itu mungkin untuk menargetkan pilihan tertentu. Dalam proyek saya, saya memiliki tabel dengan kelas = "variasi" , dan opsi pilih ada di sel tabel td = "nilai" , dan pilih memiliki ID pilih # pa_color . Elemen opsi juga memiliki opsi kelas = "terlampir" (di antara tag kelas lainnya). Jika pengguna masuk sebagai pelanggan grosir, mereka dapat melihat semua opsi warna. Tetapi pelanggan ritel tidak diperbolehkan membeli 2 opsi warna, jadi saya telah menonaktifkannya

<option class="attached" disabled>color 1</option>
<option class="attached" disabled>color 2</option>

Butuh sedikit logika, tapi inilah cara saya menargetkan opsi pilih yang dinonaktifkan.

CSS

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

Dengan itu, opsi warna saya hanya dapat dilihat oleh pelanggan grosir.

Meninggalkan di sini alternatif cepat, menggunakan toggle kelas di atas meja. Perilaku ini sangat mirip dengan yang dipilih, tetapi dapat ditata dengan transisi, filter dan warna, masing-masing anak secara individual.

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>

Anda dapat menggunakan gaya sebaris untuk menambahkan styling custome ke <option>tag.

Misalnya: <option style="font-weight:bold;color:#09C;">Option 1</option> Ini akan menerapkan gaya hanya untuk <option>elemen tertentu ini .

Kemudian Anda dapat menggunakan sedikit sihir javascript untuk menerapkan gaya inline ke semua <option>elemen dalam <select>tag seperti:

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

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

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

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

Anda juga dapat menggunakan <option value="" disabled> <br> </option>untuk menambahkan jeda baris di antara opsi.

Elemen ini diberikan oleh OS, bukan HTML. Itu tidak dapat ditata melalui 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>

coba ini dapat membantu Anda

[ https://codepen.io/venu9l/pen/jeNXzY][1]

Anda dapat menambahkan kelas dan memberikan font-weight: 700; dalam opsi. Tetapi dengan menggunakan ini semua teks akan menjadi tebal.

Ini pasti akan berhasil. Opsi pilih diberikan oleh OS bukan oleh html. Itu sebabnya gaya CSS tidak berpengaruh, .. umumnya option{font-size : value ; background-color:colorCode; border-radius:value; }
ini akan berfungsi, tetapi kami tidak dapat menyesuaikan padding, margin dll.

Di bawah kode 100% berfungsi untuk menyesuaikan tag pilih yang diambil dari contoh ini

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>

Sekalipun tidak banyak properti untuk diubah, tetapi Anda dapat mencapai style berikut hanya dengan css:

HTML:

<div class="options">
    <select>
        <option value="">Apple</option>
        <option value="">Banana</option>
        <option value="">Orange</option>
        <option value="">Mango</option>
    </select>
</div>

CSS:

.options {

    border: 1px solid #e5e5e5;
    padding: 10px;

    select {
        font-size: 14px;
        border: none;
        width: 100%;
        background: white;
    }
}