Bagaimana cara mendesain opsi elemen "pilih" html?


202

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.


Tidak yakin tentang yang ini. Menurut saya tidak. Anda memerlukan sihir JavaScript (jQuery) agar itu terjadi.
Madara's Ghost

6
pilihan masih sama menjengkelkan dengan gaya seperti sebelumnya. apa yang Anda mungkin ingin gunakan adalah optgroup: htmlhelp.com/reference/html40/forms/optgroup.html ini akan memberi Anda kategori tebal dan miring (seperti Elektronik) di mana banyak pilihan jatuh.
wolv2012

Jawaban:


202

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.


2
Perilaku ini bervariasi di berbagai browser dan OS; ada baiknya mengklarifikasi jika Anda berbicara terutama tentang IE pada Windows.
Vince Bowdren

4
Anda dapat select > optionmendesain, tetapi tidak ada solusi crossbrowser yang andal untuk melakukannya dan, pada chrome setidaknya Anda dapat paling banyak menyesuaikan ukuran font, keluarga, latar belakang, dan warna latar depan. Mungkin beberapa penyesuaian lagi, tetapi hal-hal seperti padding, warna melayang dan semacamnya saya tidak bisa berhasil berubah. Memang mungkin ada alternatif, tetapi tergantung pada proyek tag <select> mungkin diperlukan misalnya untuk validasi sudut atau alasan lain.
Felype

3
@ tidak ada Saya telah memposting jawaban untuk tag opsi Styling . Itu tidak menunjukkan cara mendesain <option>, tetapi ia menunjukkan cara meniru <select>sehingga Anda bisa mendesain opsi.
UndoingTech

3
Meskipun ini adalah jawaban yang diterima, dimungkinkan untuk menata OPTIONdengan CSS dengan peramban modern - menambahkan tag gaya ke opsi
Jimmery

2
Dalam pengenalan perangkat seluler, ini bahkan kurang gaya, karena elemen opsi bahkan tidak ditampilkan sehubungan dengan pilih dalam aliran halaman - itu terdaftar di bagian yang dapat digulir terpisah di bagian bawah layar - ditata sangat berbeda dari seperti yang Anda harapkan di browser tradisional.
awe

74

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.


jadi kesimpulannya adalah: "opsi pilih tidak dapat ditata sebagian hanya dengan CSS", kan ??? :(
MrClan

27
Poin penting di sini adalah bahwa mereka dapat ditata, hanya sangat minimal.
devios1

1
Untuk menambah poin devios - pemilihan asli dapat ditata minimal untuk Windows, tetapi tidak harus untuk OS lainnya. Seperti yang disebutkan di bawah ini, Anda harus menukar pilihan untuk elemen lain (biasanya ul) dan menduplikasi fungsi pilih dalam JavaScript untuk kontrol penuh atas gaya.
Benjamin Robinson

3
<option style = "color: 'red';"> tidak berfungsi untuk saya ... saran?
Fabio

1
style="background-color: red;color: red;"tidak bekerja untuk saya. EDIT: Setelah menutup konsol pengembang gaya diterapkan.
Hitam

33

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:

masukkan deskripsi gambar di sini


2
Itu benar hanya karena semua pemilih menargetkan bayangan DOM jeroan, Anda dapat menargetkan mereka secara manual per browser.
mystrdat

20

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

});

1
dapatkah Anda memposting kode di sini karena mungkin suatu hari akan dihapus tetapi di sini ia akan tetap di tempat yang aman
Mohammad Alabed

Ini adalah cara yang sangat dinamis untuk melakukan apa yang Anda inginkan dengan pilih, jika Anda akan memiliki pilihan yang lebih baik saya akan senang melihatnya sebagai jawaban di sini @ahnbizcad
Anahit DEV

17
Ini BUKAN html asli <select> itu hanya render satu dengan beberapa kode jQuery. Jika Anda akan melakukan ini mungkin juga menggunakan plugin jQuery, Bereaksi komponen dll. Yang menangani keyboard ATAS / BAWAH, ketikahead / cari dll.
John Culviner

10

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 :

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

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 .

pilih2

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 .

masukkan deskripsi gambar di sini

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


19
Karena pertanyaannya adalah tentang menata elemen opsi , bukan elemen pilih .
Jsalinas

5
Jawaban ini menyesatkan, karena saat Anda secara eksplisit menunjukkan bahwa Anda dapat mendesain pilihan , Anda mengklaim bahwa pilihannya adalah apa yang bisa ditata, meskipun itu adalah elemen OS yang hanya menerima gaya CSS minimal sama sekali.
Andrew Gray

@Jsalinas maaf, jawaban saya sebelumnya sangat mengerikan. Saya telah menggantinya dengan yang saya harap lebih baik.
Katie

1
Jawaban bagus! Contoh yang bagus!
cskwg

Select2 4.0 tidak murni lagi karena sekarang dibangun di atas jQuery.
galmok

9

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>
masukkan deskripsi gambar di sini


2
@Muhamed Al Khalil: Saya memperbarui contoh agar lebih jelas, karena opsi yang dipilih saat ini memiliki gayanya sendiri juga. Jika itu tidak berhasil, saya curiga masalah kompatibilitas browser. = \
HoldOffHunger

3
@Akash: Menarik, ini bekerja pada Firefox sebelum mereka merilis Firefox Quantum, dan saat ini masih berfungsi di Chrome (60% + pengguna). Saya yakin itu bug!
HoldOffHunger

1
Ini hanya berfungsi untuk drop down, bukan apa yang ditampilkan sebagai yang dipilih. Sangat buruk.
WebDude0482



2

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.


<option style = "color: 'red';"> tidak berfungsi untuk saya ... saran?
Fabio

1
Hapus kutipan lebih dari red: <option style = "color: red;">
dy_

1

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


1

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.


1

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>


1

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.


0

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]

0

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


0

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>


Dari Ulasan: Hai, tolong jangan jawab hanya dengan kode sumber. Cobalah untuk memberikan deskripsi yang bagus tentang cara kerja solusi Anda. Lihat: Bagaimana saya menulis jawaban yang baik? . Terima kasih
sɐunıɔ ןɐ qɐp


0

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

masukkan deskripsi gambar di sini

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;
    }
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.