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:
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.
Berikut ini adalah tiga solusi:
Solusi #1 - penampilan: tidak ada - dengan Internet Explorer 10 - 11 pemecahan masalah (Demo)
--
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) - 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;
}
}
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 lebih mudah dan memiliki dukungan browser - itu umumnya harus cukup.
Jika browser yang mendukung untuk Internet Explorer 9 (dan kemudian) dan Firefox 34 (dan kemudian) diperlukan kemudian terus membaca...
Solusi #2 Memotong pilih elemen untuk menyembunyikan panah default ([demo][9])
--
Bungkus pilih
elemen dalam sebuah div dengan fixed width dan overflow:hidden
.
Kemudian memberikan pilih
elemen lebar sekitar 20 piksel yang lebih besar daripada div.
Hasilnya adalah bahwa default panah drop-down dari pilih
elemen akan tersembunyi (karena overflow:hidden
pada wadah), dan anda dapat menempatkan gambar latar belakang yang anda inginkan pada tangan kanan-sisi div.
The keuntungan dari pendekatan ini adalah bahwa hal itu adalah cross-browser (Internet Explorer 8 dan kemudian, WebKit, dan Gecko). Namun, kelemahan dari pendekatan ini adalah bahwa pilihan drop-down menjorok keluar di sebelah kanan-sisi-sisi (oleh 20 piksel yang kami hid... karena pilihan elemen yang mengambil lebar pilih elemen).
[Perlu dicatat, bagaimanapun, bahwa jika kustom pilih elemen ini diperlukan hanya untuk mobile perangkat - maka masalah di atas doesn't berlaku - karena cara masing-masing ponsel native terbuka pilih elemen. Jadi untuk mobile, ini mungkin menjadi 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 kebiasaan panah diperlukan pada Firefox - sebelum Versi 35 - tapi anda don't perlu dukungan versi lama dari Internet Explorer - kemudian terus membaca...
Solusi #3 - Gunakan pointer-acara
property ([demo][14])
--
Idenya di sini adalah untuk overlay unsur di atas asli panah drop-down (untuk membuat kustom kami satu) dan kemudian melarang pointer pada acara itu.
Keuntungan: Ia bekerja dengan baik di WebKit dan Gecko. Itu terlihat baik juga (tidak menonjol keluar pilihan
elemen).
Kerugian: Internet Explorer (Internet Explorer 10 dan ke bawah) doesn't dukungan pointer-peristiwa
, yang berarti anda dapat't klik custom panah. Juga, yang lain (yang jelas) kelemahan dengan metode ini adalah bahwa anda dapat't target baru anda panah gambar dengan efek hover atau tangan kursor, karena kita hanya memiliki cacat peristiwa pointer pada mereka!
Namun, dengan metode ini anda bisa gunakan Modernisasi atau komentar bersyarat untuk membuat Internet Explorer kembali ke standar yang dibangun di panah.
NB: bahwa Internet Explorer 10 doesn't dukungan bersyarat komentar
lagi: Jika anda ingin menggunakan pendekatan ini, anda mungkin harus menggunakan Modernizr. Namun, hal ini masih mungkin untuk mengecualikan pointer-peristiwa CSS dari Internet Explorer 10 dengan CSS hack 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]-->
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.
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."
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*.
<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):
<!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;
}
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>
<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>
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:
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
}
<!-- language: lang-html -->
<select id="mySelect">
<option>Option 1</option>
<option>Option 2</option>
</select>
Posting blog Bagaimana bentuk CSS drop down style tidak ada JavaScript bekerja untuk saya, tapi gagal di Opera 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>
<option>Select an Option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
Saya punya untuk kasus anda menggunakan Bootstrap. 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=");
}
<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: base64 barang-barang fa-chevron-down
dalam SVG.
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'> \
<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 styling (perbatasan, padding, warna, dll.) ini cukup mudah.
Ini bekerja di semua browser saya hanya mencoba (Firefox 50, Chrome 55, Edge 38, dan Safari 10). Satu catatan tentang Firefox adalah bahwa jika anda ingin menggunakan karakter #
di data URI (misalnya isi: #000
) anda perlu untuk melarikan diri (isi: %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;}
Gunakan klip
properti untuk tanaman perbatasan dan panah dari pilih
elemen, kemudian tambahkan pengganti anda sendiri gaya wrapper:
<!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>
Menggunakan kedua pilih dengan zero opacity untuk membuat tombol yang 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 browser lain, tapi @media query dapat menutupi itu.
Referensi
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>
<option >Something #1</option>
<option selected="selected">Something #2</option>
<option >Something #3</option>
</select>
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">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>
Contoh yang sangat bagus yang menggunakan :setelah
dan :sebelum
untuk melakukan trik ini di Styling Pilih Box dengan CSS3 | CSSDeck
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..
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.
<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>
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;
}
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]
Cek biola ini, dan maafkan saya overstyling:
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:
<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 menjaga hal sederhana yang saya lakukan itu dengan jQuery - tetapi anda bisa melakukan hal yang sama tanpa itu)
Solusi ini memberikan anda lebih dari sekedar memilih: nilai juga dapat diedit secara manual. Gunakan readonly property jika anda memilih default-pilih dibatasi jalan.
Untuk memaksimalkan styling kemungkinan, <optgroup> kategori tidak sekitar anak-anak mereka, mereka're pindah sebelum mereka. It's disengaja, it's visual yang lebih jelas, dan mereka're senang untuk bekerja sama, don't khawatir.
Javascript: ya saya tahu OP berkata, "tidak ada Javascript" tapi saya memahaminya sebagai silakan don't repot-repot dengan plugin, yang baik-baik saja. Anda don't membutuhkan perpustakaan untuk yang satu ini. Bahkan tidak jQuery, seperti yang saya katakan, itu's hanya untuk kejelasan contoh.
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>