Jak stylizować opcję elementu HTML „wybierz”?

202

Oto mój HTML:

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

Chcę, aby nazwa produktu (tj. „Produkt 1”, „Produkt 2” itp.) Była pogrubiona, a jej kategorie (tj. Elektronika, sport itp.) Kursywą, używając wyłącznie CSS. Znalazłem stare pytanie, w którym wspomniano, że nie jest możliwe używanie HTML i CSS, ale mam nadzieję, że jest teraz rozwiązanie.

MrClan
źródło
Nie jestem pewien co do tego. Myślę, że nie. Aby tak się stało, będziesz potrzebować magii JavaScript (jQuery).
Madara's Ghost
6
opcje są wciąż tak irytujące jak kiedyś. możesz użyć optgroup: htmlhelp.com/reference/html40/forms/optgroup.html, co da ci odważną i wyróżnioną kursywą kategorię (np. elektronika), do której należy wiele opcji.
wolv2012,

Odpowiedzi:

200

Istnieje tylko kilka atrybutów stylu, które można zastosować do <option>elementu.

Wynika to z tego, że ten typ elementu jest przykładem „zastąpionego elementu”. Są zależne od systemu operacyjnego i nie są częścią HTML / przeglądarki. Nie można go stylizować za pomocą CSS.

Istnieją zastępcze wtyczki / biblioteki, które wyglądają jak, <select>ale w rzeczywistości składają się ze zwykłych HTMLelementów, które MOŻNA stylizować.

Diodeus - James MacFarlane
źródło
2
To zachowanie różni się w zależności od przeglądarki i systemu operacyjnego; warto wyjaśnić, jeśli mówisz głównie o IE w systemie Windows.
Vince Bowdren,
4
Możesz stylizować select > option, ale nie ma do tego niezawodnego rozwiązania crossbrowser, a na chromie możesz przynajmniej dostosować rozmiar czcionki, rodzinę, tło i kolor pierwszego planu. Może jeszcze kilka poprawek, ale takie rzeczy jak wyściółka, kolor najechania i takie, których nie udało mi się zmienić. Rzeczywiście mogą istnieć alternatywy, ale w zależności od projektu tag <select> może być konieczny na przykład do weryfikacji kątowej lub z innego powodu.
Felype,
3
@ brak Wysłałem odpowiedź na tagi opcji Stylizacja . Nie pokazuje, jak stylizować <option>, ale pokazuje, jak emulować, <select>aby można było stylizować opcje.
UndoingTech,
3
Chociaż jest to zaakceptowana odpowiedź, możliwe jest stylizowanie za OPTIONpomocą CSS za pomocą nowoczesnych przeglądarek - dodaj tag stylu do opcji
Jimmery
2
We wprowadzaniu urządzeń mobilnych jest to jeszcze mniej stylowe, ponieważ elementy opcji nie są nawet wyświetlane w odniesieniu do wyboru w przepływie strony - jest wymieniony w osobnej przewijalnej sekcji u dołu ekranu - stylizowany bardzo inaczej niż jak oczekujesz w tradycyjnej przeglądarce.
awe
74

Nie, nie jest to możliwe, ponieważ stylem tych elementów zajmuje się system operacyjny użytkownika. MSDN odpowie na twoje pytanie tutaj :

Z wyjątkiem background-colori color, ustawienia stylu zastosowane przez obiekt stylu dla elementu opcji są ignorowane.

esqew
źródło
więc wniosek jest następujący: „opcji wyboru nie można częściowo stylizować tylko za pomocą CSS”, prawda? :(
MrClan,
27
Ważną kwestią jest to, że można je stylizować, tylko bardzo minimalnie.
devios1
1
Aby dodać do sedna devios - natywna selekcja może być minimalnie stylizowana dla Windows, ale niekoniecznie dla innych systemów operacyjnych. Jak wspomina pumbo poniżej, będziesz musiał zamienić zaznaczenie na inne elementy (zwykle ul) i powielić funkcjonalność zaznaczenia w JavaScript, aby uzyskać pełną kontrolę nad stylami.
Benjamin Robinson
3
<option style = "color: 'red';"> nie działa dla mnie ... sugestia?
fabio
1
style="background-color: red;color: red;"nie działa dla mnie EDYCJA: Po zamknięciu konsoli programisty zastosowano styl.
Czarny
33

Możesz do pewnego stopnia stylizować elementy opcji.

Za pomocą znacznika * CSS możesz stylizować opcje wewnątrz ramki rysowanej przez system.

Przykład:

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

Będzie to wyglądać tak:

wprowadź opis zdjęcia tutaj

Zoron19
źródło
2
Jest to prawdą tylko dlatego, że wszystkie selektory są skierowane na wewnętrzne cienie DOM, więc możesz kierować je ręcznie w przeglądarce.
mystrdat
20

Znalazłem i używam tego dobrego przykładu stylizacji selekcji i opcji. Możesz zrobić z tym zaznaczeniem wszystko, co chcesz. Oto skrzypce

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

});
Anahit Ghazaryan
źródło
1
czy mógłbyś opublikować kod tutaj, ponieważ może kiedyś zostanie usunięty, ale tutaj pozostanie w bezpiecznym miejscu
Mohammad Alabed
Jest to bardzo dynamiczny sposób robienia tego, co chcesz z wybranymi, jeśli będziesz miał lepszą opcję, z przyjemnością zobaczę ją jako odpowiedź tutaj @ahnbizcad
Anahit DEV
17
To NIE jest natywny HTML <select> , po prostu ponownie renderuje jeden z jakimś kodem jQuery. Jeśli masz zamiar to zrobić, równie dobrze możesz użyć wtyczki jQuery, komponentu React itp., Który obsługuje klawiaturę w GÓRĘ / W DÓŁ, ​​pisanie naprzód / wyszukiwanie itp.
John Culviner
10

Oto kilka sposobów na styl <option>oraz <select>użycie Bootstrap i / lub jquery. Rozumiem, że nie o to pyta oryginalny plakat, ale pomyślałem, że mogę pomóc innym, którzy natkną się na to pytanie.

Nadal możesz osiągnąć cel, jakim jest stylizacja każdego z <option>osobna, ale może być również konieczne zastosowanie jakiegoś stylu <select>. Moim ulubionym jest wspomniana poniżej biblioteka „Bootstrap Select”.


Bootstrap Select Library (jquery)

Jeśli już używasz bootstrap, możesz wypróbować bibliotekę Bootstrap Select lub bibliotekę poniżej (ponieważ ma motyw bootstrap).

Pamiętaj, że możesz stylizować cały selectelement lub optionelementy osobno.

Przykłady :

wprowadź opis zdjęcia tutaj

wprowadź opis zdjęcia tutaj

wprowadź opis zdjęcia tutaj

Zależności : wymaga jQuery v1.9.1 +, Bootstrap , Bootstrap's dropdown.js i CSS Bootstrap

Zgodność : niepewny, ale bootstrap mówi, że „obsługuje najnowsze, stabilne wersje wszystkich głównych przeglądarek i platform”

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/[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>


Select2 (JS lib)

Dostępna jest biblioteka o nazwie Select2 .

wybierz 2

Zależności : Biblioteka to tylko JS + CSS + HTML (nie wymaga JQuery).

Kompatybilność : IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+

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

Dostępny jest również motyw bootstrap .

Brak przykładu 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>

Przykład ładowania początkowego:

$(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 ($ i Bootstrap i JQuery)

Jeśli masz dodatkowe pieniądze, możesz skorzystać z biblioteki premium MDBootstrap . (To jest cały zestaw interfejsu użytkownika , więc nie jest lekki)

Pozwala to stylizować wybrane i opcjonalne elementy przy użyciu projektu Materiał .

wprowadź opis zdjęcia tutaj

Jest darmowa wersja, ale nie pozwoli ci użyć ładnego materiału!

Zależności : Bootstrap 4 , JQuery,

Kompatybilność : „obsługuje najnowsze, stabilne wersje wszystkich głównych przeglądarek i platform”.

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

Katie
źródło
19
Ponieważ pytanie dotyczy stylizacji elementu opcji , a nie elementu wyboru .
Jsalinas,
5
Ta odpowiedź jest myląca, ponieważ chociaż wyraźnie pokazujesz, że możesz stylizować zaznaczenie , twierdzisz, że można stylizować tę opcję , nawet jeśli jest to element systemu operacyjnego, który akceptuje tylko minimalne style CSS.
Andrew Gray,
@Jsalinas przepraszam, moja poprzednia odpowiedź była okropna. Zamieniłem go na taki, który mam nadzieję, że jest lepszy.
Katie
1
Świetna odpowiedź! Dobre przykłady!
cskwg
Select2 4.0 nie jest już czysty, ponieważ teraz opiera się na jQuery.
galmok
9

Wygląda na to, że mogę po prostu ustawić CSS selectbezpośrednio w Chrome. Poniżej podano kod CSS i 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>
wprowadź opis zdjęcia tutaj

HoldOffHunger
źródło
2
@Muhamed Al Khalil: Zaktualizowałem przykład, aby był bardziej przejrzysty, ponieważ obecnie wybrana opcja ma również swój własny styl. Jeśli to nie zadziała, podejrzewam problemy ze zgodnością przeglądarki. = \
HoldOffHunger
3
@Akash: Interesujące, działało to w Firefoksie przed wydaniem Firefox Quantum i nadal działa w Chrome (ponad 60% użytkowników). Założę się, że to błąd!
HoldOffHunger
1
Działa to tylko w przypadku menu rozwijanego, a nie tego, co jest wyświetlane jako wybrane. Szkoda.
WebDude0482
3

Bootstrap pozwala na korzystanie ze stylizacji poprzez zawartość danych:

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

Przykład: https://silviomoreto.github.io/bootstrap-select/examples/

Bhetzie
źródło
9
HTML osadzony w atrybutach danych sprawia, że ​​czuję się naprawdę źle.
Ben Hull
2

Niektóre właściwości mogą być stylizowane<option> tagowi:

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

Możesz także użyć niestandardowej czcionki dla pojedynczego <option>tagu, na przykład dowolnej czcionki Google , ikon materiałów lub innych czcionek ikon od icomoon lub podobnych. (Może się to przydać w przypadku wyboru czcionek itp.)

Biorąc to pod uwagę, możesz utworzyć stos rodziny czcionek i wstawić ikony w <option>znacznikach, np.

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

skąd pochodzi, Iconsa reszta pochodzi Roboto.

Pamiętaj jednak, że niestandardowe czcionki nie działają w przypadku wyboru urządzeń mobilnych.

dy_
źródło
<option style = "color: 'red';"> nie działa dla mnie ... sugestia?
fabio
1
Usuń cudzysłowy nad red: <option style = "color: red;">
dy_
1

Właściwie możesz dodać: przed i: po i styl. Przynajmniej to jest coś

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

Oprogramowanie ProSales
źródło
1

Jest rok 2017 i można kierować na wybrane opcje wyboru. W moim projekcie mam tabelę z klasą = „wariacje” , a opcje wyboru znajdują się w komórce tabeli td = „wartość” , a selekcja ma identyfikator select # pa_color . Element opcjonalny ma również opcję class = „attach” (pośród innych znaczników class). Jeśli użytkownik jest zalogowany jako klient hurtowy, może zobaczyć wszystkie opcje kolorów. Ale klienci detaliczni nie mogą kupować 2 opcji kolorów, więc ich wyłączyłem

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

Zajęło to trochę logiki, ale oto, w jaki sposób celowałem w wyłączone opcje wyboru.

CSS

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

Dzięki temu moje opcje kolorów są widoczne tylko dla klientów hurtowych.

Pan Garrison
źródło
1

Pozostawiając tutaj szybką alternatywę, używając przełączania klas na stole. Zachowanie jest bardzo podobne do wybranego, ale można je stylizować za pomocą przejścia, filtrów i kolorów, każde dziecko osobno.

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
źródło
1

Możesz użyć stylów wbudowanych, aby dodać stylizację klienta do <option>tagów.

Na przykład: <option style="font-weight:bold;color:#09C;">Option 1</option> zastosuje style tylko do tego konkretnego <option>elementu.

Następnie możesz użyć odrobiny magii javascript, aby zastosować style wbudowane do wszystkich <option>elementów w <select>tagu, tak jak poniżej:

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

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

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

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

Możesz także użyć, <option value="" disabled> <br> </option>aby dodać podział między opcjami.

Vinayak Mukherjee
źródło
0

Ten element jest renderowany przez system operacyjny, a nie HTML. Nie można go stylizować za pomocą 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>

spróbuj tego, może ci to pomóc

[ https://codepen.io/venu9l/pen/jeNXzY][1]
Venkat G.
źródło
0

Możesz dodać klasę i podać grubość czcionki: 700; w opcji. Ale dzięki temu cały tekst stanie się pogrubiony.

Anas Chaudhary
źródło
0

To na pewno zadziała. Opcja wyboru jest renderowana przez system operacyjny, a nie przez HTML. To jest styl CSS nie ma wpływu, .. ogólnie option{font-size : value ; background-color:colorCode; border-radius:value; }
będzie działać, ale nie możemy dostosować wypełnienia, marginesu itp.

Poniżej kodu 100% pracy, aby dostosować tag wybierany z tego przykładu

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>

Harikrishnan k
źródło
Z recenzji: Cześć, proszę nie odpowiadać tylko kodem źródłowym. Spróbuj podać ładny opis działania twojego rozwiązania. Zobacz: Jak napisać dobrą odpowiedź? . Dzięki
sɐunıɔ ןɐ qɐp
ten kod jest prosto z w2schools w3schools.com/howto/tryit.asp?filename=tryhow_custom_select
devpato
0

Nawet jeśli nie ma wiele właściwości do zmiany, ale możesz osiągnąć następujący styl tylko za pomocą css:

wprowadź opis zdjęcia tutaj

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;
    }
}
Anil Singh
źródło