Bagaimana cara gaya <select> dropdown dengan CSS?

Ada CSS-satunya cara untuk gaya <select> dropdown?

Saya perlu untuk gaya <select> membentuk sebanyak mungkin secara manusiawi, tanpa JavaScript. Apa sifat yang dapat saya gunakan untuk melakukannya di CSS?

Kode ini harus kompatibel dengan semua browser utama:

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

Aku tahu aku bisa membuatnya dengan JavaScript: Contoh.

Dan saya'm tidak berbicara tentang styling sederhana. Aku ingin tahu, apa yang terbaik yang bisa kita lakukan dengan CSS saja.

Saya menemukan pertanyaan pada Stack Overflow.

Dan ini pada Doctype.com.

Peter Mortensen
Pertanyaan edit 7 September 2019 в 7:15
Pemrograman
cross-browser html css combobox skinning
13 Desember 2009 в 3:33
144 tayangan
Mengomentari pertanyaan (7)
Larutan

Berikut ini adalah tiga solusi:

Solusi #1 - penampilan: tidak ada - dengan Internet Explorer 10 - 11 pemecahan masalah ([Demo][6])

--

Untuk menyembunyikan panah default set penampilan: none pada pilih elemen, kemudian tambahkan kustom anda sendiri panah dengan gambar latar

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

Browser Yang Mendukung:

penampilan: tidak ada telah sangat baik dengan dukungan browser ([caniuse][7]) - kecuali untuk Internet Explorer 11 (dan kemudian) dan Firefox 34 (dan kemudian).

Kita 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 adalah kekhawatiran, kami tidak memiliki cara untuk menghapus panah default (yang berarti bahwa kita sekarang akan memiliki dua anak panah), tapi, kita bisa menggunakan funky Internet Explorer 9 pemilih.

Setidaknya undo kami kustom panah - meninggalkan default pilih panah 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;
    }
}

Semua bersama-sama:

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>
  Apples
  Pineapples
  Chocklate
  Pancakes
Peter Mortensen
Jawaban edit 7 September 2019 в 7:23
Komentar (14)

Hal ini dimungkinkan, namun sayangnya sebagian besar di WebKit-based browser untuk sejauh mana kita, sebagai pengembang, memerlukan. Berikut ini adalah contoh CSS styling yang dikumpulkan dari Chrome pilihan panel melalui built-in alat pengembang inspektur, ditingkatkan untuk mencocokkan saat ini didukung properti CSS 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 setiap halaman dalam sebuah WebKit-based browser ini harus mengubah penampilan dari kotak pilih, menghapus OS standar-panah dan menambahkan PNG-panah, menempatkan beberapa spasi sebelum dan setelah label, hampir apa pun yang anda inginkan.

Bagian yang paling penting adalah penampilan property, yang mengubah bagaimana elemen berperilaku.

Bekerja sempurna di hampir semua WebKit-based browser, termasuk ponsel, walaupun Tokek doesn't dukungan penampilan serta WebKit, tampaknya.

Peter Mortensen
Jawaban edit 7 September 2019 в 7:27
Komentar (8)

Pilih elemen dan dropdown dengan fitur yang sulit untuk gaya.

gaya atribut untuk memilih elemen oleh Chris Heilmann menegaskan apa yang Ryan Dohery mengatakan dalam sebuah komentar untuk jawaban pertama:

"pilih elemen adalah bagian dari sistem operasi, bukan browser chrome. Oleh karena itu, hal ini sangat tidak dapat diandalkan untuk gaya, dan itu tidak selalu masuk akal untuk mencoba pokoknya."

Komentar (0)

Terbesar inkonsistensi I've perhatikan ketika menata pilih dropdown adalah Safari dan Google Chrome rendering (Firefox adalah sepenuhnya disesuaikan melalui CSS). Setelah beberapa pencarian melalui mengaburkan kedalaman dari Internet saya menemukan berikut, yang hampir sepenuhnya memecahkan keraguan saya dengan WebKit:

Safari dan Google Chrome fix:

select {
  -webkit-appearance: none;
}

Ini tidak, bagaimanapun, menghapus panah dropdown. Anda dapat menambahkan panah dropdown menggunakan dekatnya div dengan latar belakang, negatif margin atau benar-benar berada di atas pilih dropdown.

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

Komentar (3)

<select> kategori dapat ditata melalui CSS sama seperti yang lain elemen HTML pada sebuah halaman HTML yang diberikan di browser. Di bawah ini adalah (terlalu sederhana) contoh yang akan posisi pilih elemen pada halaman dan membuat teks pilihan dengan warna biru.

Contoh file HTML (selectExample.html):





  Select Styling



<select id="styledSelect" class="blueText">
  Apple
  Orange
  Cherry
Komentar (3)

Aku punya masalah ini dengan tepat, kecuali aku tidak't menggunakan gambar dan tidak dibatasi oleh dukungan browser. Ini harus «spek» dan dengan keberuntungan mulai bekerja di mana-mana akhirnya.

Menggunakan layered diputar lapisan latar belakang untuk «memotong» panah dropdown, sebagai pseudo-elemen yang tidak't bekerja untuk memilih elemen.

Edit: Dalam versi terbaru ini saya menggunakan CSS variabel dan kecil sistem theming.

:akar { --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>
  So many options
  ...

  So many options
  ...

  So many options
  ...
Komentar (2)

Di sini adalah versi yang bekerja di semua browser modern. Kuncinya adalah menggunakan penampilan:tidak ada yang menghilangkan format default. Karena semua format pergi, anda harus menambahkan kembali panah yang secara visual membedakan pilih 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 1
    Option 2
Komentar (0)

Posting blog [Bagaimana bentuk CSS drop down style tidak ada JavaScript][1] bekerja untuk saya, tapi gagal di [Opera][2] meskipun:

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>
    Select an Option
    Option 1
    Option 2
Komentar (0)

Saya punya untuk kasus anda menggunakan [Bootstrap][1]. Ini adalah solusi sederhana yang bekerja:

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=");
}


<section class="container">

    <select class="form-control">
      One
      Two
Komentar (0)

Di browser modern itu's relatif tidak menyakitkan untuk gaya <select> di CSS. Dengan penampilan: tidak ada bagian hanya rumit adalah mengganti panah (jika itu's apa yang anda inginkan). Berikut ini's solusi yang menggunakan inline data: URI dengan teks biasa SVG:

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'> \
       \
    </svg>");
}

<select>
  Option 1
  Option 2

  Option 1
  Option 2
Komentar (1)
 
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;}
Komentar (1)

Gunakan klip properti untuk tanaman perbatasan dan panah dari pilih elemen, kemudian tambahkan pengganti anda sendiri gaya wrapper:






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


      <span>
        <select>
          Alpha
          Beta
          Charlie
Komentar (4)

Mengedit elemen ini tidak dianjurkan, tapi jika anda ingin mencobanya's seperti yang lain elemen HTML.

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>
    Something #1
    Something #2
    Something #3
Peter Mortensen
Jawaban edit 7 September 2019 в 7:30
Komentar (3)

Ya. Anda mungkin gaya setiap elemen HTML dengan tag nama, seperti ini:

select {
  font-weight: bold;
}

Tentu saja, anda juga dapat menggunakan class CSS untuk style ini, seperti elemen lain:


<select class="important">
  Important Option
  Another Important Option
Komentar (3)

Contoh yang sangat bagus yang menggunakan :setelah dan :sebelum untuk melakukan trik ini di Styling Pilih Box dengan CSS3 | CSSDeck

Komentar (2)
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 memilih unsur-unsur dan saya dihapus gambar..

Komentar (0)

Berikut ini's solusi yang didasarkan pada ide favorit saya dari diskusi ini. Hal ini memungkinkan styling <select> elemen langsung tanpa markup tambahan.

Ia bekerja dengan Internet Explorer 10 (dan kemudian) dengan aman fallback untuk Internet Explorer 8/9. Satu peringatan untuk browser ini adalah bahwa gambar latar belakang harus diposisikan dan cukup kecil untuk bersembunyi di balik asli memperluas kontrol.

HTML


<select name='options'>
  Option 1
  Option 2
  Option 3
Peter Mortensen
Jawaban edit 7 September 2019 в 8:16
Komentar (0)

Sebagai Internet Explorer 10, anda dapat menggunakan ::-ms-memperluas pseudo element selector untuk gaya, dan menyembunyikan, panah drop down elemen. 

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

Sisa gaya harus sama dengan browser lain.

[Berikut ini adalah garpu dari Danield's jsfiddle yang berlaku dukungan untuk IE10][2]

Komentar (0)

Ada's cara yang mudah.

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

Trik balik: secepat <select> tag mendapat properti yang disebut "size", hal itu akan berperilaku seperti tetap tinggi daftar, dan, tiba-tiba, untuk beberapa alasan, memungkinkan anda untuk gaya neraka keluar dari itu. Sekarang tegasnya, daftar tetap adalah efek samping - tapi itu hanya membantu kita lebih karena kita menggunakannya untuk "turun-turun lihat".

Minimal contoh:




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


...
<div class="stylish">
     Choose your superhero: 
    <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());">


              Gandalf        
              Harry Potter   
              Jon Snow
dkellner
Jawaban edit 7 Oktober 2019 в 9:01
Komentar (0)

Pilih kustom CSS styles

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="">
  Lorem
  Lorem Ipsum

  Disabled

  Color!
  Lorem Ipsum
Peter Mortensen
Jawaban edit 7 September 2019 в 8:21
Komentar (0)