Suatu malam saya menghabiskan waktu, membaca artikel di Internet, dan menemukan
hub hub pengguna
Cyapa ini , di mana ada tertulis bagaimana menyesuaikan pilih pada css murni. Dalam proses melihat solusi ini, saya menemukan beberapa momen yang sangat tidak nyaman yang saya coba perbaiki dalam solusi saya untuk masalah ini. Jadi mari kita mulai.
Sambil menonton kode posting itu, saya perhatikan bahwa penulis membuat pilihan yang tidak bisa ditutup ketika mengklik di luarnya, serta ketidakmampuan untuk membuka pilih ketika mengklik nama elemen, jika sudah dipilih.
Dalam versi penyesuaian saya, saya, seperti penulis sebelumnya, menggunakan label, input [type = "radio"] dan kekuatan penyeleksi css. Karena pemilihan itu sendiri menggunakan alat css benar-benar mustahil untuk dikustomisasi, saya meniru perilaku pemilihan.
Untuk memulai, saya melemparkan markup berikut:
Tampilkan kode html <label for="select" class="select"> <input type="radio" name="list" value="not_changed" id="bg" checked /> <input type="radio" name="list" value="not_changed" id="select"> <label class="bg" for="bg"></label> <div class="items"> <input type="radio" name="list" value="first_value" id="list[0]"> <label for="list[0]">First option</label> <input type="radio" name="list" value="second_value" id="list[1]"> <label for="list[1]">Second loooooong option</label> <span id="text">Select something...</span> </div> </label>
Saat melihat kode ini, Anda mungkin memiliki pertanyaan: "Mengapa semua input memiliki nama yang sama?". Saya akan segera menjawab: ini dilakukan agar pilih kita berperilaku tepat (itu membuka dan menutup bila perlu). Tetapi hal pertama yang pertama. Mari kita beralih ke bagian yang paling menarik, menurut saya, css.
Tampilkan kode css input { display: none; } #text { position: absolute; display: block; top: 0; padding-left: 10px; } .select { display: inline-block; width: 160px; height: 34px; line-height: 30px; position: relative; } .select:before { content: ">"; display: inline-block; background: white; position: absolute; right: -5px; top: 2px; z-index: 2; width: 30px; height: 26px; text-align: center; line-height: 26px; border: 2px solid #ddd; transform: rotate(90deg); cursor: pointer; } .select input[name="list"]:not(:checked) ~ #text { color: black; background: white; } .select input[name="list"]:checked ~ #text { background: transparent; color: transparent; z-index: 2; } #select:disabled ~ .items #text { background: #eee; } .items { display: block; min-height: 30px; position: absolute; border: 2px solid #ddd; overflow: hidden; width: 160px; cursor: pointer; } #select:not(:checked) ~ .items { height: 30px; } .items label { border-top: 2px solid #ddd; display: none; padding-left: 10px; background: white; } .items label:hover { background: #eee; cursor: pointer; } #select:checked ~ .items { padding-top: 30px; } #select:checked ~ .items label { display: block; } .items input:checked + label { display: block!important; border: none; background: white; } #select:checked ~ .bg { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 0; background: rgba(0,0,0,0.4); }
Ini dia - bagian yang paling menarik di mana perlu untuk memahami bagaimana mengubah pilihan input (semua input dengan jenis radio memiliki nama yang sama => kita hanya dapat memilih salah satu dari mereka) mempengaruhi pilihan kita. Fitur lain dari opsi ini adalah kemampuan untuk menonaktifkan pemilihan menggunakan atribut yang dinonaktifkan pada #select.
Anda dapat menemukan contoh jadi di
sini .
Faktanya, itu saja. Beberapa minus dari penulis sebelumnya sudah diperbaiki, jadi solusi ini, saya yakin, saat ini dapat dianggap sebagai versi css yang ideal dari pemilihan. Saya harap solusi saya bermanfaat bagi seseorang.