Lebih
Bagaimana gaya pilihan html "pilih" elemen?
Berikut ini's my HTML:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
Saya ingin membuat nama produk (yaitu 'Product1', 'Produk2' , dll) berani, dan kategori(yaitu. Elektronik, Olahraga, dll) yang dicetak miring, dengan menggunakan CSS saja. Saya menemukan sebuah pertanyaan lama yang disebutkan itu's tidak mungkin menggunakan HTML dan CSS, tapi mudah-mudahan, ada's solusi sekarang.
153
17
Hanya ada beberapa atribut gaya yang dapat diterapkan untuk sebuah
<option>
elemen.Hal ini karena jenis elemen adalah contoh dari "diganti elemen". Mereka adalah OS yang tergantung dan bukan bagian dari HTML/browser. Hal ini tidak dapat ditata melalui
CSS
.Ada pengganti plugin/library yang terlihat seperti
<select>
tetapi sebenarnya terdiri dari regularHTML
unsur-unsur yang BISA ditata.Tidak, itu's tidak mungkin, karena styling untuk elemen-elemen ini ditangani oleh pengguna's OS. [MSDN akan menjawab pertanyaan anda di sini][1]:
[1]: https://web.archive.org/web/20170528070441/http://msdn.microsoft.com/en-us/library/ms535877(v=vs. 85).aspx
Anda dapat gaya pilihan elemen untuk batas tertentu.
Menggunakan * tag CSS anda dapat gaya pilihan dalam kotak penalti yang diambil oleh sistem.
Contoh:
Itu akan terlihat seperti ini:
Saya menemukan dan menggunakan ini contoh yang baik dari styling memilih dan pilihan.Anda dapat melakukan ini dengan memilih semua yang anda inginkan.Berikut ini adalah [Biola][1]
html
Sepertinya aku hanya bisa mengatur CSS untuk
pilih
di Chrome langsung. CSS dan kode HTML yang diberikan di bawah ini :Berikut ini's beberapa cara untuk gaya
<option>
bersama dengan<select>
jika anda're menggunakan Bootstrap dan/atau jquery. Saya mengerti ini isn't apa asli poster meminta tapi saya pikir saya bisa membantu orang lain yang tersandung ke pertanyaan ini.Anda masih dapat mencapai tujuan gaya masing-masing
<option>
secara terpisah, tapi mungkin perlu untuk menerapkan beberapa style untuk<select>
juga. Favorit saya adalah "Bootstrap Pilih" perpustakaan yang disebutkan di bawah ini.Bootstrap Pilih Library (jquery)
Jika anda're sudah menggunakan bootstrap, anda dapat mencoba [Bootstrap Pilih][1] perpustakaan atau perpustakaan di bawah ini (karena memiliki tema bootstrap).
Perhatikan bahwa anda dapat gaya seluruh
pilih
elemen, ataupilihan
elemen secara terpisah.Contoh:
[![enter image description here][2]][2]
[![enter image description here][3]][3]
[![enter image description here][4]][4]
Ketergantungan: membutuhkan jQuery v1.9.1+, Bootstrap, Bootstrap ini dropdown.js komponen, dan Bootstrap's CSS
Kompatibilitas: tidak Yakin, tapi bootstrap mengatakan "mendukung terbaru, rilis stabil dari semua browser utama dan platform"
Demo: https://developer.snapappointments.com/bootstrap-select/examples/
Bootstrap memungkinkan anda untuk menggunakan styling melalui data-isi:
Seperti yang sudah disebutkan, satu-satunya cara adalah dengan menggunakan plugin yang menggantikan
<select>
fungsi.Daftar plugin jQuery: http://plugins.jquery.com/tag/select/
Lihatlah contoh menggunakan
Select2
plugin: http://jsfiddle.net/swsLokfj/23/Meninggalkan di sini alternatif yang cepat, menggunakan class beralih pada meja. Perilaku ini sangat mirip dari pilih, tapi bisa ditata dengan transisi, filter dan warna, masing-masing anak secara individual.
Beberapa sifat yang bisa ditata untuk
<option>
tag:font-family
warna
font-*
background-color
Anda juga dapat menggunakan font kustom untuk masing-masing
<option>
tag, misalnya setiap google font, Ikon Materi atau ikon font dari icomoon atau sama. (Yang mungkin akan berguna untuk font penyeleksi dll.)Mengingat itu, anda dapat menciptakan font-family stack dan menyisipkan ikon di
<option>
kategori, misalnya.It's 2017 dan itu ADALAH mungkin untuk target tertentu, pilih pilihan. Di proyek saya, saya memiliki sebuah tabel dengan a class="variasi", dan pilih opsi ada di meja sel td="nilai", dan pilih memiliki ID pilih#pa_color. Pilihan elemen juga memiliki kelas pilihan="terpasang" (antara lain kelas kategori). Jika pengguna login sebagai pelanggan grosir, mereka dapat melihat semua pilihan warna. Tapi pelanggan ritel tidak diperbolehkan untuk pembelian 2 pilihan warna, jadi saya've keluarga mereka
Butuh sedikit logika, tapi di sini adalah bagaimana saya ditargetkan penyandang cacat pilih pilihan.
CSS
Dengan itu, saya pilihan warna hanya terlihat untuk pelanggan grosir.
Sebenarnya anda dapat menambahkan :before dan :after dan gaya mereka. Setidaknya itu's sesuatu
Elemen ini diberikan oleh OS, bukan HTML. Hal ini tidak dapat ditata melalui CSS.
It's pasti akan bekerja. Pilih opsi yang diberikan oleh OS tidak oleh html. Yang's whythe CSS style doesn't efek, umumnya..
option{font-size : nilai ; background-color:colorCode; border-radius:nilai; }
ini akan bekerja, tapi kita bisa't menyesuaikan padding, margin, dll..Kode di bawah ini 100% bekerja untuk menyesuaikan pilih tag yang diambil dari [contoh][1]
Anda dapat menggunakan inline styles untuk menambahkan custome styling
<option>
kategori.Misalnya :
<option style="font-weight:bold;color:#09D;">Opsi 1</option>
Ini akan menerapkan gaya tertentu<option>
elemen saja.Maka anda dapat menggunakan sedikit javascript sihir untuk menerapkan inline styles untuk semua
<option>
elemen-elemen dalam a<select>
tag seperti berikut :var pilih = $(document).getElementById('#pilih-elemen-id')
var pilihan = pilih.anak-anak('#option-elemen-id')
pilihan.css('font-weight', 'bold')
pilihan.css('font-size', '24px')
Anda juga dapat menggunakan
<option value="," keluarga> <br> </option>
untuk menambahkan line-break antara opsi.Anda dapat menambahkan kelas dan memberikan font-weight:700; dalam pilihan. Tetapi dengan menggunakan ini, semua teks akan menjadi berani.
Seperti dinyatakan di atas, tidak benar-benar mungkin; namun, jika anda hanya ingin gaya keadaan awal untuk sesuatu seperti 'Pilih Produk...' opsi sebelum pengguna berinteraksi dengan field, anda bisa melakukan sesuatu seperti di bawah ini -
Di bawah ini contoh gaya (secara teknis semua) pilihan pertama merah dan sekali pengguna berinteraksi akan menghapus opsi itu (yang memiliki nilai="defaultValue" set) dan menghapus kelas diterapkan untuk memilih. Anda dapat menerapkan pilihan lain selain warna juga, tetapi mereka hanya akan mempengaruhi lapangan setelah berubah, bukan tampilan daftar.
CSS
jQuery