Apakah ada cara khusus CSS untuk gaya <select>dropdown?

Saya perlu mendesain <select>formulir sebanyak mungkin secara manusiawi, tanpa JavaScript apa pun. Apa sajakah properti yang dapat saya gunakan untuk melakukannya di CSS?

Kode ini harus kompatibel dengan semua browser utama:

• Internet Explorer 6, 7, dan 8
• Firefox
• Safari

Saya tahu saya bisa membuatnya dengan JavaScript: Contoh .

Dan saya tidak berbicara tentang gaya sederhana. Saya ingin tahu, apa yang terbaik yang bisa kita lakukan dengan CSS saja.

Saya menemukan pertanyaan serupa di Stack Overflow.

Dan yang ini di Doctype.com.

Inilah tiga solusi:

Solusi # 1 - penampilan: tidak ada - dengan solusi Internet Explorer 10 - 11 ( Demo )

-

Untuk menyembunyikan panah default yang diatur appearance: nonepada elemen pilih, lalu tambahkan panah kustom Anda sendiri denganbackground-image

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

Dukungan Browser:

appearance: nonememiliki dukungan browser yang sangat bagus ( caniuse ) - kecuali untuk Internet Explorer 11 (dan yang lebih baru) dan Firefox 34 (dan yang lebih baru).

Kami dapat meningkatkan teknik ini dan menambahkan dukungan untuk Internet Explorer 10 dan Internet Explorer 11 dengan menambahkan

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

Jika Internet Explorer 9 menjadi perhatian, kami tidak memiliki cara untuk menghapus panah default (yang berarti bahwa kami sekarang memiliki dua panah), tetapi, kami dapat menggunakan pemilih Internet Explorer 9 yang funky.

Untuk setidaknya membatalkan panah kustom kami - membiarkan panah pilih default tetap utuh.

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    }
}

Bersama:

select {
  margin: 50px;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}


/* CAUTION: Internet Explorer hackery ahead */


select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background: none\9;
        padding: 5px\9;
    }
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

Solusi ini mudah dan memiliki dukungan browser yang bagus - biasanya sudah cukup.

Jika dukungan browser untuk Internet Explorer 9 (dan yang lebih baru) dan Firefox 34 (dan yang lebih baru) diperlukan maka teruslah membaca ...

Solusi # 2 Pangkas elemen pilih untuk menyembunyikan panah default ( demo )

-

(Baca lebih lanjut di sini)

Bungkus selectelemen dalam div dengan lebar tetap danoverflow:hidden .

Kemudian beri selectelemen lebar sekitar 20 piksel lebih besar dari div .

Hasilnya adalah panah drop-down default selectelemen akan disembunyikan (karenaoverflow:hidden pada wadah), dan Anda dapat menempatkan gambar latar belakang yang Anda inginkan di sisi kanan div.

The Keuntungan dari pendekatan ini adalah bahwa itu adalah cross-browser (Internet Explorer 8 dan kemudian, WebKit , dan Gecko ). Namun, kelemahan dari pendekatan ini adalah bahwa pilihan drop-down menonjol di sisi kanan (oleh 20 piksel yang kami sembunyikan ... karena elemen opsi mengambil lebar elemen pilih).

[Namun, perlu dicatat bahwa jika elemen pilih khusus hanya diperlukan untuk perangkat seluler - maka masalah di atas tidak berlaku - karena cara masing-masing ponsel membuka elemen pilih secara native. Jadi untuk seluler, ini mungkin solusi terbaik.]

.styled select {
  background: transparent;
  width: 150px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
}
.styled {
  margin: 50px;
  width: 120px;
  height: 34px;
  border: 1px solid #111;
  border-radius: 3px;
  overflow: hidden;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}

<div class="styled">
  <select>
    <option>Pineapples</option>
    <option selected>Apples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
</div>

Jika panah khusus diperlukan di Firefox - sebelum Versi 35 - tetapi Anda tidak perlu mendukung versi Internet Explorer yang lama - maka teruslah membaca ...

Solusi # 3 - Gunakan pointer-eventsproperti ( demo )

-

(Baca lebih lanjut di sini)

Idenya di sini adalah untuk overlay elemen di atas panah drop down asli (untuk membuat custom kami) dan kemudian melarang event pointer di atasnya.

Keuntungan: Ini berfungsi baik di WebKit dan Gecko. Ini terlihat bagus juga (tidak ada optionelemen menonjol ).

Kerugian: Internet Explorer (Internet Explorer 10 ke bawah) tidak mendukungpointer-events , yang berarti Anda tidak dapat mengklik panah khusus. Juga, kerugian (jelas) lain dengan metode ini adalah bahwa Anda tidak dapat menargetkan gambar panah baru Anda dengan efek hover atau kursor tangan, karena kami baru saja menonaktifkan peristiwa pointer pada mereka!

Namun, dengan metode ini Anda dapat menggunakan Modernizer atau komentar bersyarat untuk membuat Internet Explorer kembali ke panah bawaan bawaan.

NB: Karena Internet Explorer 10 tidak mendukung conditional commentslagi: Jika Anda ingin menggunakan pendekatan ini, Anda mungkin harus menggunakan Modernizr . Namun, masih dimungkinkan untuk mengecualikan pointer-event CSS dari Internet Explorer 10 dengan retasan CSS yang dijelaskan di sini .

.notIE {
  position: relative;
  display: inline-block;
}
select {
  display: inline-block;
  height: 30px;
  width: 150px;
  outline: none;
  color: #74646E;
  border: 1px solid #C8BFC4;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px #DDD8DC;
  background: #FFF;
}
/* Select arrow styling */

.notIE .fancyArrow {
  width: 23px;
  height: 28px;
  position: absolute;
  display: inline-block;
  top: 1px;
  right: 3px;
  background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
  pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  .notIE .fancyArrow {
    display: none;
  }
}

<!--[if !IE]> -->
<div class="notIE">
  <!-- <![endif]-->
  <span class="fancyArrow"></span>
  <select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
  <!--[if !IE]> -->
</div>
<!-- <![endif]-->

Itu mungkin, tapi sayangnya sebagian besar di browser berbasis WebKit sejauh yang kita, sebagai pengembang, butuhkan. Berikut adalah contoh gaya CSS yang dikumpulkan dari panel opsi Chrome melalui inspektur alat pengembang bawaan, ditingkatkan untuk mencocokkan properti CSS yang saat ini didukung di sebagian besar browser modern:

select {
    -webkit-appearance: button;
    -moz-appearance: button;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 20px;
    -moz-padding-end: 20px;
    -webkit-padding-start: 2px;
    -moz-padding-start: 2px;
    background-color: #F07575; /* Fallback color if gradients are not supported */
    background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
    background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Firefox (3.6 to 15) */
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer  10*/
    background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
    background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
    background-position: center right;
    background-repeat: no-repeat;
    border: 1px solid #AAA;
    border-radius: 2px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    color: #555;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Ketika Anda menjalankan kode ini pada halaman apa pun dalam browser berbasis WebKit, kode ini harus mengubah tampilan kotak pilih, menghapus panah OS standar dan menambahkan tanda panah PNG, meletakkan spasi sebelum dan sesudah label, hampir semua yang Anda inginkan.

Bagian terpenting adalah appearanceproperti, yang mengubah cara elemen berperilaku.

Ini berfungsi dengan baik di hampir semua browser berbasis WebKit, termasuk yang mobile, meskipun Gecko tidak mendukung appearancedan juga WebKit, tampaknya.

Elemen pilih dan fitur dropdown -nya sulit untuk ditata.

atribut style untuk elemen terpilih oleh Chris Heilmann mengkonfirmasi apa yang dikatakan Ryan Dohery dalam komentar atas jawaban pertama:

"Elemen pilih adalah bagian dari sistem operasi, bukan browser chrome. Oleh karena itu, sangat tidak dapat diandalkan untuk gaya, dan bagaimanapun juga tidak masuk akal untuk mencoba."

Saya punya masalah persis ini, kecuali saya tidak bisa menggunakan gambar dan tidak dibatasi oleh dukungan browser. Ini harus «spesifik» dan dengan keberuntungan mulai bekerja di mana-mana pada akhirnya .

Ia menggunakan lapisan latar belakang yang diputar untuk «memotong» panah dropdown, karena elemen semu tidak akan bekerja untuk elemen pilih.

Sunting: Dalam versi yang diperbarui ini saya menggunakan variabel CSS dan sistem bertema kecil.

:root {
  --radius: 2px;
  --baseFg: dimgray;
  --baseBg: white;
  --accentFg: #006fc2;
  --accentBg: #bae1ff;
}

.theme-pink {
  --radius: 2em;
  --baseFg: #c70062;
  --baseBg: #ffe3f1;
  --accentFg: #c70062;
  --accentBg: #ffaad4;
}

.theme-construction {
  --radius: 0;
  --baseFg: white;
  --baseBg: black;
  --accentFg: black;
  --accentBg: orange;
}

select {
  font: 400 12px/1.3 sans-serif;
  -webkit-appearance: none;
  appearance: none;
  color: var(--baseFg);
  border: 1px solid var(--baseFg);
  line-height: 1;
  outline: 0;
  padding: 0.65em 2.5em 0.55em 0.75em;
  border-radius: var(--radius);
  background-color: var(--baseBg);
  background-image: linear-gradient(var(--baseFg), var(--baseFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
  background-position: right 20px center, right bottom, right bottom, right bottom;   
}

select:hover {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
}

select:active {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
  color: var(--accentBg);
  border-color: var(--accentFg);
  background-color: var(--accentFg);
}

<select>
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-pink">
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-construction">
  <option>So many options</option>
  <option>...</option>
</select>

Ketidakkonsistenan terbesar yang saya perhatikan ketika dropdown pemilihan styling adalah Safari dan rendering Google Chrome (Firefox sepenuhnya dapat dikustomisasi melalui CSS). Setelah beberapa pencarian melalui kedalaman Internet yang tidak jelas saya menemukan yang berikut, yang hampir sepenuhnya menyelesaikan keraguan saya dengan WebKit:

Safari dan perbaikan Google Chrome :

select {
  -webkit-appearance: none;
}

Namun, ini menghapus panah dropdown. Anda dapat menambahkan panah dropdown menggunakan terdekat divdengan latar belakang, margin negatif atau benar-benar diposisikan di atas dropdown pilih.

* Informasi lebih lanjut dan variabel lain tersedia di properti CSS: -webkit-appearance .

<select>tag dapat ditata melalui CSS seperti halnya elemen HTML lainnya pada halaman HTML yang dirender dalam browser. Di bawah ini adalah contoh (terlalu sederhana) yang akan memposisikan elemen pilih pada halaman dan membuat teks opsi dengan warna biru.

Contoh file HTML (selectExample.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Select Styling</title>
  <link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="cherry">Cherry</option>
</select>
</body>
</html>

Contoh file CSS (selectExample.css):

/* All select elements on page */
select {
  position: relative;
}

/* Style by class. Effects the text of the contained options. */
.blueText {
  color: #0000FF;
}

/* Style by id. Effects position of the select drop down. */
#styledSelect {
  left: 100px;
}

Posting blog Bagaimana cara drop down gaya CSS tidak ada JavaScript berfungsi untuk saya, tetapi gagal di Opera :

select {
  border: 0 none;
  color: #FFFFFF;
  background: transparent;
  font-size: 20px;
  font-weight: bold;
  padding: 2px 10px;
  width: 378px;
  *width: 350px;
  *background: #58B14C;
}

#mainselection {
  overflow: hidden;
  width: 350px;
  -moz-border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
  border-radius: 9px 9px 9px 9px;
  box-shadow: 1px 1px 11px #330033;
  background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;
}

<div id="mainselection">
  <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

Ini adalah versi yang berfungsi di semua browser modern. Kuncinya menggunakan appearance:noneyang menghapus pemformatan default. Karena semua format sudah tidak ada, Anda harus menambahkan kembali panah yang membedakan secara visual pemilihan dari input.

Contoh kerja: https://jsfiddle.net/gs2q1c7p/

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
    padding: .5em;
    padding-right: 1.5em
}

#mySelect {
    border-radius: 0
}

<select id="mySelect">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Saya sampai pada kasus Anda menggunakan Bootstrap . Ini adalah solusi paling sederhana yang berfungsi:

select.form-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 1ex;
    background-origin: content-box;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
  <form class="form-horizontal">
    <select class="form-control">
      <option>One</option>
      <option>Two</option>
    </select>
  </form>
</section>

Catatan: barang-barang base64 ada fa-chevron-downdi SVG.

Di peramban modern, relatif tidak mudah untuk mendesain <select>dalam CSS. Dengan appearance: nonesatu-satunya bagian yang sulit adalah mengganti panah (jika itu yang Anda inginkan). Berikut adalah solusi yang menggunakan data:URI sebaris dengan SVG teks biasa:

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  
  background-repeat: no-repeat;
  background-size: 0.5em auto;
  background-position: right 0.25em center;
  padding-right: 1em;
  
  background-image: url("data:image/svg+xml;charset=utf-8, \
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
      <polygon points='0,0 60,0 30,40' style='fill:black;'/> \
    </svg>");
}

<select>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select style="font-size: 2rem;">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Sisa gaya (batas, bantalan, warna, dll.) Cukup mudah.

Ini berfungsi di semua browser yang baru saja saya coba (Firefox 50, Chrome 55, Edge 38, dan Safari 10). Satu catatan tentang Firefox adalah bahwa jika Anda ingin menggunakan #karakter dalam data URI (mis. fill: #000) Anda harus menghindarinya ( fill: %23000).

select  {
    outline: 0;
    overflow: hidden;
    height: 30px;
    background: #2c343c;
    color: #747a80;
    border: #2c343c;
    padding: 5px 3px 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 10px;
}

select option {border: 1px solid #000; background: #010;}

Kustom Pilih gaya CSS

Diuji di Internet Explorer (10 dan 11), Edge, Firefox, dan Chrome

select::-ms-expand {
  display: none;
}
select {
  display: inline-block;
  box-sizing: border-box;
  padding: 0.5em 2em 0.5em 0.5em;
  border: 1px solid #eee;
  font: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px top 1em, right 10px top 1em;
  background-size: 5px 5px, 5px 5px;
}

<select name="">
  <option value="">Lorem</option>
  <option value="">Lorem Ipsum</option>
</select>

<select name="" disabled>
  <option value="">Disabled</option>
</select>

<select name="" style="color:red;">
  <option value="">Color!</option>
  <option value="">Lorem Ipsum</option>
</select>

Gunakan clipproperti untuk memotong perbatasan dan panah selectelemen, lalu tambahkan gaya pengganti Anda sendiri ke pembungkus:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }
          body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green;  background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select>
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

Gunakan pilihan kedua dengan nol opacity untuk membuat tombol dapat diklik:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
          #fake { position: absolute; opacity: 0; }
    
          body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select id="real">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
        <select id="fake">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

Koordinat berbeda antara Webkit dan peramban lain, tetapi kueri @media dapat mengatasinya.

Referensi

• Dojo FX Tests: dojox.fx.ext-dojo.complex
• CSS Masking: Uji properti klip dengan fungsi kotak dan nilai otomatis klip ke kotak batas

Contoh yang sangat bagus yang menggunakan :afterdan :beforemelakukan triknya adalah di Styling Select Box dengan CSS3 | CSSDeck

Edit elemen ini tidak disarankan, tetapi jika Anda ingin mencobanya seperti elemen HTML lainnya.

Edit contoh:

/* Edit select */
select {
    /* CSS style here */
}

/* Edit option */
option {
    /* CSS style here */
}

/* Edit selected option */
/* element  attr    attr value */
option[selected="selected"] {
    /* CSS style here */
}

<select>
    <option >Something #1</option>
    <option selected="selected">Something #2</option>
    <option >Something #3</option>
</select>

label {
    position: relative;
    display: inline-block;
}
select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: black;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: lightblue;
}

Ini menggunakan warna latar belakang untuk elemen tertentu dan saya menghapus gambar ..

Iya. Anda dapat mendesain elemen HTML apa pun dengan nama tag-nya, seperti ini:

select {
  font-weight: bold;
}

Tentu saja, Anda juga dapat menggunakan kelas CSS untuk menatanya, seperti elemen lainnya:

<select class="important">
  <option>Important Option</option>
  <option>Another Important Option</option>
</select>

<style type="text/css">
  .important {
    font-weight: bold;
  }
</style>

Inilah solusi berdasarkan ide favorit saya dari diskusi ini. Ini memungkinkan styling elemen <select> secara langsung tanpa markup tambahan.

Ini berfungsi Internet Explorer 10 (dan lebih baru) dengan fallback aman untuk Internet Explorer 8/9. Satu peringatan untuk browser ini adalah bahwa gambar latar belakang harus diposisikan dan cukup kecil untuk bersembunyi di balik kontrol ekspansi asli.

HTML

<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

SCSS

body {
  padding: 4em 40%;
  text-align: center;
}

select {
  $bg-color: lightcyan;
  $text-color: black;
  appearance: none; // Using -prefix-free http://leaverou.github.io/prefixfree/
  background: {
    color: $bg-color;
    image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
    position: right;
    repeat: no-repeat;
  }
  border: {
    color: mix($bg-color, black, 80%);
    radius: .2em;
    style: solid;
    width: 1px;
    right-color: mix($bg-color, black, 60%);
    bottom-color: mix($bg-color, black, 60%);
  }
  color: $text-color;
  padding: .33em .5em;
  width: 100%;
}

// Removes default arrow for Internet Explorer 10 (and later)
// Internet Explorer 8/9 gets the default arrow which covers the caret
// image as long as the caret image is smaller than and positioned
// behind the default arrow
select::-ms-expand {
    display: none;
}

CodePen

http://codepen.io/ralgh/pen/gpgbGx

Pada Internet Explorer 10, Anda dapat menggunakan ::-ms-expandpemilih elemen semu untuk bergaya, dan menyembunyikan, elemen panah turun bawah.

select::-ms-expand {
    display:none;
    /* or visibility: hidden; to keep it's space/hitbox */
}

Gaya yang tersisa harus serupa dengan browser lain.

Ini adalah garpu dasar jsfiddle Danield yang menerapkan dukungan untuk IE10

Ada cara yang mudah.

Periksa biola ini, dan maafkan saya overstyling: https://jsfiddle.net/dkellner/7ac9us70/

Trik di belakang: segera setelah tag <select> mendapatkan properti yang disebut "size", itu akan berperilaku sebagai daftar tinggi-tetap, dan, tiba-tiba, untuk beberapa alasan, memungkinkan Anda untuk mendesainnya. Sebenarnya, daftar tetap adalah efek samping - tetapi itu hanya membantu kita lebih banyak karena kita menggunakannya untuk "tampilan drop-down".

Contoh minimal:

<style>

    .stylish span   {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)"><br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="1">  Gandalf        </option>
            <option value="2">  Harry Potter   </option>
            <option value="3">  Jon Snow       </option>

            <!-- ... and so on -->

        </select>
    </span>
</div>

(untuk membuatnya tetap sederhana, saya melakukannya dengan jQuery - tetapi Anda dapat melakukan hal yang sama tanpa itu)

Catatan samping

• Solusi ini memberi Anda lebih dari sekadar pilihan: nilainya juga dapat diedit secara manual. Gunakan properti readonly jika Anda lebih suka cara pilih-pilih default.

• Untuk memaksimalkan kemungkinan penataan, tag <optgroup> tidak ada di sekitar anak-anak mereka, mereka dipindahkan sebelum mereka. Disengaja, lebih jelas secara visual, dan mereka senang bekerja seperti ini, jangan khawatir.

• Javascripts: ya saya tahu OP mengatakan "tidak Javascript" tapi saya memahaminya karena tolong jangan repot-repot dengan plugin , yang baik-baik saja. Anda tidak memerlukan pustaka untuk yang satu ini. Bahkan jQuery, seperti yang saya katakan, itu hanya untuk kejelasan contohnya.

Anda harus melakukannya seperti pada Styling styling, optgroup dan opsi dengan CSS . Dalam banyak hal, warna latar dan warna adalah apa yang biasanya Anda perlukan untuk menentukan gaya, bukan keseluruhan pilih.

Anda juga dapat menambahkan gaya melayang ke dropdown.

select {position:relative; float:left; width:21.4%; height:34px; background:#f9f9e0; border:1px solid #41533f; padding:0px 10px 0px 10px; color:#41533f; margin:-10px 0px 0px 20px; background: transparent; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;}
select:hover {background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #fff;}

<html>
<head>
</head>
<body>
<select name="type" class="select"><option style="color:#41533f;" value="Select option">Select option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</body>
</html>

Metode ketiga dalam jawaban Danield dapat ditingkatkan untuk bekerja dengan efek hover dan peristiwa mouse lainnya. Pastikan elemen "tombol" muncul tepat setelah elemen pilih di markup. Kemudian targetkan menggunakan pemilih + CSS:

HTML:

<select class="select-input">...</select>
<div class="select-button"></div>

CSS:

.select-input:hover+.select-button {
    <Hover styles here>
}

Akan tetapi, ini akan menunjukkan efek melayang ketika melayang di mana saja di atas elemen-pilih, bukan hanya di atas "tombol".

Saya menggunakan metode ini dalam kombinasi dengan Angular (karena proyek saya kebetulan merupakan aplikasi Angular), untuk mencakup seluruh elemen-pilih, dan biarkan Angular menampilkan teks dari opsi yang dipilih dalam elemen "tombol". Dalam hal ini masuk akal bahwa efek hover berlaku ketika melayang di mana saja selama pemilihan.

Itu tidak berfungsi tanpa JavaScript, jadi jika Anda ingin melakukan ini, dan situs Anda harus bekerja tanpa JavaScript, Anda harus memastikan bahwa skrip Anda menambahkan elemen dan kelas yang diperlukan untuk peningkatan. Dengan begitu, browser tanpa JavaScript hanya akan mendapatkan yang normal, tanpa gaya, pilih, alih-alih lencana bergaya yang tidak diperbarui dengan benar.

Solusi khusus CSS dan HTML

Tampaknya kompatibel dengan Chrome, Firefox, dan Internet Explorer 11. Tapi tolong tinggalkan umpan balik Anda tentang browser web lainnya.

Seperti yang disarankan oleh jawaban Danield , saya membungkus pilih saya dalam div (bahkan dua div untuk kompatibilitas x-browser) untuk mendapatkan perilaku yang diharapkan.

Lihat http://jsfiddle.net/bjap2/

HTML:

<div class="sort-options-wrapper">
    <div class="sort-options-wrapper-2">
        <select class="sort-options">
                <option value="choiceOne">choiceOne</option>
                <option value="choiceOne">choiceThree</option>
                <option value="choiceOne">choiceFour</option>
                <option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
        </select>
    </div>
    <div class="search-select-arrow-down"></div>
</div>

Perhatikan dua pembungkus div.

Perhatikan juga div tambahan yang ditambahkan untuk menempatkan tombol panah ke bawah di mana pun Anda suka (benar-benar diposisikan), di sini kami letakkan di sebelah kiri.

CSS

.sort-options-wrapper {
    display: inline-block;
    position: relative;
    border: 1px solid #83837F;
}

/* This second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
    overflow: hidden;
}

select {
    margin-right: -19px; /* That's what is hiding the default-provided browser arrow */
    padding-left: 13px;
    margin-left: 0;
    border: none;
    background: none;

    /* margin-top & margin-bottom must be set since some
       browsers have default values for select elements */
    margin-bottom: 1px;
    margin-top: 1px;
}

select:focus {
    outline: none; /* Removing default browsers outline on focus */
}
.search-select-arrow-down {
    position: absolute;
    height: 10px;
    width: 12px;
    background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
    left: 1px;
    top: 5px;
}