İşte benim HTML:

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

Ürün adını (yani 'Product1', 'Product2' vb.) Kalın ve kategorilerini (yani Elektronik, Spor, vb.) Yalnızca CSS kullanarak italik yapmak istiyorum. HTML ve CSS kullanmanın mümkün olmadığını belirten eski bir soru buldum, ancak umarım şimdi bir çözüm var.

Bir <option>öğeye uygulanabilecek yalnızca birkaç stil özelliği vardır .

Bunun nedeni, bu tür öğelerin "değiştirilen öğelere" bir örnektir. İşletim sistemine bağlıdır ve HTML / tarayıcının bir parçası değildir. Üzerinden stil olamaz CSS.

Yedek eklentileri / a gibi bakmak o kütüphaneler vardır <select>ama aslında düzenli oluşan HTMLunsurların CAN tarz.

Hayır, bu öğelerin stili kullanıcının işletim sistemi tarafından ele alındığından mümkün değildir. MSDN sorunuzu burada yanıtlayacaktır :

Hariç background-colorve color, opsiyon elemanı için stil nesnesi aracılığıyla uygulanan stil ayarları dikkate alınmaz.

Seçenek öğelerini bir dereceye kadar şekillendirebilirsiniz.

* CSS etiketini kullanarak, sistemin çizdiği kutunun içindeki seçenekleri biçimlendirebilirsiniz.

Misal:

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

Bu şöyle görünecek:

Ben buldum ve tüm want.Here olduğunu seçmek seçer stil bu iyi örneği kullanarak ve options.You bu ile yapabilirsiniz keman

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

});

İşte stiline bazı yollar var <option>birlikte <select>size Bootstrap kullanıyorsanız ve / veya jquery. Orijinal posterin sorduğu şey bu değil, ama bu soruya rastlayan başkalarına yardım edebileceğimi düşündüm.

Yine de her birini <option>ayrı ayrı şekillendirme hedefine ulaşabilirsiniz , ancak aynı <select>zamanda bir stil uygulamanız gerekebilir . En sevdiğim, aşağıda belirtilen "Bootstrap Select" kütüphanesidir.

Bootstrap Seçme Kütüphanesi (jquery)

Zaten bootstrap kullanıyorsanız, Bootstrap Select kütüphanesini veya aşağıdaki kütüphaneyi deneyebilirsiniz (bir bootstrap teması olduğu için).

Tüm selectöğeyi veya optionöğeleri ayrı ayrı biçimlendirebileceğinizi unutmayın.

Örnekler :

Bağımlılıklar : jQuery v1.9.1 +, Bootstrap , Bootstrap'ın dropdown.js bileşeni ve Bootstrap'ın CSS'sini gerektirir

Uyumluluk : Emin değilim, ancak bootstrap "tüm önemli tarayıcıların ve platformların en son, kararlı sürümlerini desteklediğini" söylüyor

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)

Select2 adında kullanabileceğiniz bir kütüphane var .

Bağımlılıklar : Kitaplık yalnızca JS + CSS + HTML'dir (JQuery gerektirmez).

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

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

Ayrıca bir bootstrap teması da var.

Bootstrap örneği yok:

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

Önyükleme örneği:

$(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 ($ ve Önyükleme ve JQuery)

Fazladan paranız varsa, bir premium kütüphane MDBootstrap kullanabilirsiniz . (Bu tam bir UI Kiti , bu yüzden hafif değil)

Bu, Malzeme tasarımını kullanarak seçim ve seçenek öğelerinizi şekillendirmenize olanak tanır .

Ücretsiz bir sürümü var, ancak güzel Malzeme tasarımını kullanmanıza izin vermiyor!

Bağımlılıklar : Bootstrap 4 , JQuery,

Uyumluluk : "tüm önemli tarayıcıların ve platformların en yeni, kararlı sürümlerini destekler."

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

Görünüşe göre selectdoğrudan Chrome'da için CSS'yi ayarlayabilirim . Aşağıda verilen CSS ve HTML kodu:

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

Daha önce de belirtildiği gibi, tek yol <select>işlevselliğin yerini alan bir eklenti kullanmaktır .

JQuery eklentilerinin listesi: http://plugins.jquery.com/tag/select/

Select2Eklentiyi kullanarak örneğe bir göz atın : http://jsfiddle.net/swsLokfj/23/

Bootstrap, veri içeriği aracılığıyla stil kullanmanıza olanak tanır:

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

Örnek: https://silviomoreto.github.io/bootstrap-select/examples/

Bazı özellikler <option>etiket için şekillendirilebilir :

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

Ayrıca, tek tek <option>etiket için özel yazı tipini kullanabilirsiniz , örneğin herhangi bir google yazı tipi , Malzeme Simgeleri veya icomoon veya benzerlerinden diğer simge yazı tipleri . (Bu, yazı tipi seçicileri vb. İçin kullanışlı olabilir.)

Bunu göz önünde bulundurarak, font-aile yığını oluşturabilir ve <option>etiketlere simgeler ekleyebilirsiniz .

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

nereden ★alınır Iconsve gerisi Roboto.

Özel yazı tiplerinin mobil seçim için çalışmadığını unutmayın.

Aslında şunu ekleyebilirsiniz: before ve: after ve bunların stillerini En azından bir şey

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

2017 ve belirli seçim seçeneklerini hedeflemek mümkün. Projemde bir class = "varations" içeren bir tablo var ve seçim seçenekleri td = "value" tablo hücresinde ve select'in # pa_color kimliğini seçin . Option öğesinde ayrıca bir class option = "attached" vardır (diğer sınıf etiketlerinin yanı sıra). Bir kullanıcı toptan müşteri olarak giriş yaptıysa, tüm renk seçeneklerini görebilir. Ancak perakende müşterilerin 2 renk seçeneği satın almalarına izin verilmiyor, bu yüzden onları devre dışı bıraktım

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

Biraz mantık aldı, ancak işte engelli seçim seçeneklerini nasıl hedeflediğimi.

CSS

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

Bununla, renk seçeneklerim sadece toptan müşteriler tarafından görülebilir.

Burada hızlı bir alternatif bırakarak, bir tablo üzerinde sınıf geçişini kullanarak. Davranış bir seçime çok benzer, ancak her çocuk ayrı ayrı geçiş, filtreler ve renkler ile şekillendirilebilir.

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>

Özel stil oluşturmak için satır içi stilleri kullanabilirsiniz. <option>Etiketlere özel .

Örneğin: <option style="font-weight:bold;color:#09C;">Option 1</option> Bu, stilleri bu özelliğe uygular<option> yalnızca öğeye .

Ardından, satır içi stilleri <option>bir <select>etiket içindeki tüm öğelere şu şekilde uygulamak için biraz javascript büyüsü kullanabilirsiniz :

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>Seçenekler arasında satır sonu eklemek için de kullanabilirsiniz .

Bu öğe HTML tarafından değil işletim sistemi tarafından oluşturulur. CSS ile stillendirilemez.

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

bunu dene sana yardımcı olabilir

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

Bir sınıf ekleyebilir ve font ağırlığı verir: 700; seçeneğini seçin. Ancak bunu kullanarak tüm metin kalınlaşacaktır.

Kesinlikle işe yarayacak. Seçim seçeneği html tarafından değil, OS tarafından oluşturulur . Bu CSS stilinin etkilemediği şey, .. genellikle option{font-size : value ; background-color:colorCode; border-radius:value; }
bu işe yarayacak, ancak dolgu, marj vb.

Aşağıdaki kod% 100 bu örnekten alınan etiketi özelleştirmek için çalışır

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>

Değiştirilecek çok fazla özellik olmasa bile, aşağıdaki stili yalnızca css ile elde edebilirsiniz:

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