Mengubahsuaikan Elemen HTML <Select> dengan CSS

Pernah merasa frustasi akibat kesulitan mengubahsuaikan elemen HTML <select> dengan CSS? Kamu enggak sendiri. Setidak-tidaknya diskusi perihal masalah ini sudah terjadi sejak September 2023 dan terlihat masih aktif hingga 3 hari yang lalu saat artikel ini ditulis. Untungnya, hari ini kita sudah bisa menikmati standar baru hasil kerja keras berbagai pihak selama bertahun-tahun! Sebelum lanjut, pastikan kamu memiliki Google Chrome versi 135 ke atas, ya.

Perhatikan implementasi paling sederhana untuk <select> berikut ini.

select {
    padding: 0.5em;
    color: #222;
    background: #FFF;
    border: 3px solid #222;
    border-radius: 0;
}

select:hover,
select:focus {
    background: #222;
    color: #FFF;
}

<select>
    <option value="" selected disabled>Pilih hewan favoritmu</option>
    <option value="harimau">🐯 Harimau</option>
    <option value="beruang">🐻 Beruang</option>
    <option value="koala">🐨 Koala</option>
    <option value="sapi">🐮 Sapi</option>
    <option value="rubah">🦊 Rubah</option>
    <option value="pinguin">🐧 Pinguin</option>
    <option value="ayam">🐔 Ayam</option>
</select>

Selanjutnya kita coba ubah suaikan mengacu kepada brand guidelines yang sedang kita pegang.

Sebagai informasi, jika latar belakang wadah elemen <select> berwarna merah, tandanya perambanmu belum mendukung. Ah, tapi jangan terlalu khawatir, karena Mozilla sudah mendokumentasikannya pada situs web MDN, tampaknya kali ini hanya masalah waktu saja. Tidak seperti dalam beberapa kasus di mana tim pengembang Mozilla Firefox dan Apple Safari punya pertimbangan sendiri—terkait kompatibi­litas atau sekuriti misalnya—hingga akhirnya urung.

select {
    padding: 0.5em 0.75em;
    color: #222;
    font-family: "Fira Sans", sans-serif;
    font-weight: 800;
    background: #FFF;
    border: 3px solid #222;
    border-radius: 0;
}

select, ::picker(select) {
    position: relative;
    appearance: base-select;
}

select:hover {
    background: #222;
    color: #FFF;
    outline: none;
}

select:open {
    background: #222;
    color: #FFF;
}

select:open::picker-icon {
    rotate: 180deg;
}

select::picker-icon,
selectedcontent {
    font-size: 0.8em;
}

::picker(select) {
    border: 3px solid #222;
}

option {
    padding: 0.5em;
    background: #FFF;
    font-size: 0.78em;
}

option:not(option:last-of-type) {
    border-bottom: 2px dashed #222;
}

option:hover,
option:focus {
    background: #DDD;
    outline: none;
}

selectedcontent .icon {
    display: none;
}

option:checked {
    font-weight: 800;
}

option::checkmark {
    order: 1;
    margin-left: auto;
    content: "✏️";
}

::picker(select) {
    top: -10px;
    opacity: 0;
    transition: all 0.15s allow-discrete;
}

::picker(select):popover-open {
    top: 0px;
    opacity: 1;
    transition: all 0.15s allow-discrete;
}

@starting-style {
    ::picker(select):popover-open {
        top: -10px;
        opacity: 0;
    }
}

<select>
    <button><selectedcontent></selectedcontent></button>
    ...
</select>

Sayangnya kelihatannya masih belum adaptif untuk perangkat dengan layar sentuh sebagai input utamanya.

Bagi kalian yang belum punya dan tidak berniat menginstal peramban lain yang sudah mendukung fitur baru ini, silakan menonton video simulasi singkat di bawah ini.

Selamat mengoding!