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.
html
css
drop-down-menu
MrClan
sumber
sumber
Jawaban:
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 dariHTML
elemen reguler yang BISA ditata.sumber
select > option
mendesain, 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.<option>
, tetapi ia menunjukkan cara meniru<select>
sehingga Anda bisa mendesain opsi.OPTION
dengan CSS dengan peramban modern - menambahkan tag gaya ke opsiTidak, itu tidak mungkin, karena penataan untuk elemen ini ditangani oleh OS pengguna. MSDN akan menjawab pertanyaan Anda di sini :
sumber
style="background-color: red;color: red;"
tidak bekerja untuk saya. EDIT: Setelah menutup konsol pengembang gaya diterapkan.Anda dapat menata elemen opsi hingga batas tertentu.
Menggunakan tag * CSS Anda dapat mengatur gaya opsi di dalam kotak yang ditarik oleh sistem.
Contoh:
Itu akan terlihat seperti ini:
sumber
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
css
JS
sumber
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
select
elemen, atauoption
elemen secara terpisah.Contoh :
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/
Select2 (JS lib)
Ada perpustakaan yang bisa Anda gunakan bernama Select2 .
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:
Contoh bootstrap:
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 .
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
sumber
Sepertinya saya bisa mengatur CSS untuk
select
di Chrome secara langsung. CSS dan kode HTML disediakan di bawah ini:sumber
Seperti yang telah disebutkan, satu-satunya cara adalah 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/sumber
Bootstrap memungkinkan Anda menggunakan gaya melalui konten data:
Contoh: https://silviomoreto.github.io/bootstrap-select/examples/
sumber
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.dari mana
★
diambilIcons
dan sisanya dariRoboto
.Perhatikan bahwa font khusus tidak berfungsi untuk seluler pilih.
sumber
red
: <option style = "color: red;">Sebenarnya Anda dapat menambahkan: sebelum dan: setelah dan gaya itu. Setidaknya itu sesuatu
sumber
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
Butuh sedikit logika, tapi inilah cara saya menargetkan opsi pilih yang dinonaktifkan.
CSS
Dengan itu, opsi warna saya hanya dapat dilihat oleh pelanggan grosir.
sumber
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.
sumber
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.sumber
Elemen ini diberikan oleh OS, bukan HTML. Itu tidak dapat ditata melalui CSS.
coba ini dapat membantu Anda
sumber
Anda dapat menambahkan kelas dan memberikan font-weight: 700; dalam opsi. Tetapi dengan menggunakan ini semua teks akan menjadi tebal.
sumber
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
sumber
Sekalipun tidak banyak properti untuk diubah, tetapi Anda dapat mencapai style berikut hanya dengan css:
HTML:
CSS:
sumber