Give More Style for Select Tag using CSS

Saya pikir urusan dropdown/select option keren punya sudah selesai. Eh taunya ada episode lanjutan kreasi dari master Treeskar. Artikel dengan judul asli Custom Select tag rupanya yang akan meneruskan chapter sekarang ;)) Dengan menggabungkan elemen input dan li serta penambahan gaya disana-sini membuat konten custom select memberi warna yang berbeda.
Pada kode CSS ada satu penggunaan properti yg mana masih merupakan experimental teknologi pada browser engine yaitu property calc() Untuk lebih jelasnya silahkan sobat baca referensi di web developer terdekat :DKetika sudah memilih, pilihan akan terlihat pada konten select. Sebelum itupun ada efek border yg terlihat sebelah kiri kala memilih! Lebih full stylish lagi semua itu di bangun hanya memakai kode CSS b-) Aslinya mah pake code sass!

.select {
position: relative;
display: inline-block;
overflow: hidden;
}
.select .label {
padding: .5em;
color: #333;
font-size: 16px;
}
.select > label {
display: block;
cursor: pointer;
border-radius: 3px;
border: 1px solid rgba(153,153,153,.7);
border-bottom-color: rgba(153,153,153,.5);
padding: .5em calc(35% + 3em) .5em 0;
background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));
}
.select > label .label {
white-space: nowrap;
}
.select > label .label:after {
content: "";
top: 1em;
right: .5em;
position: absolute;
transition: .1s linear top;
border: .5em solid transparent;
border-top-color: #999;
}
.select > label:hover .label:after {
top: 1em;
}
.select > label:hover {
background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0));
}
.select:hover > label {
background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,0));
}
.select .options {
margin: 0;
padding: 0;
background: #ddd;
height: 0;
transition: .3s linear height;
max-height: 200px;
overflow-y: auto;
}
.select .options:hover {
height: auto;
border-bottom: 1px solid #f00;
}
.select .options li {
list-style: none;
border-top: 1px solid #eee;
border-bottom: 1px solid #ccc;
}
.select .options li label {
color: #333;
display: block;
cursor: pointer;
text-align: left;
padding: .4em .5em;
transition: .2s linear all;
}
.select .options li label:hover {
background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,0));
}
.select .options li:nth-child(1) label:hover {
background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));
}
.select .options li:nth-last-child(1) {
border-bottom: none;
}
.select .options li [type="radio"] {
display: none;
}
.select .options li [type="radio"]:checked ~ label {
cursor: default;
border-left: .4em solid #f00;
}
.select .options li [type="radio"]:checked ~ label:after {
content: attr(data-title);
display: block;
position: absolute;
top: .56em;
right: .5em;
border-radius: 1em;
box-shadow: inset 0 0 .3em rgba(0,0,0,.7);
padding: .3em 1em;
background: #777;
color: #fff;
pointer-events: none;
font-size: 80%;
max-width: 30%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.select #if-focus {
position: absolute;
display: block;
top: -999px;
}
.select #if-focus:focus ~ label span.label:after {
border-top-color: transparent;
border-bottom-color: #999;
top: .3em;
}
.select #if-focus:focus ~ .options {
height: auto;
border-bottom: 1px solid #aaa;
}

Untuk merubah lebar, sobat cari kode .select > label dan lakukan perubahan nominal di properti padding: .5em calc(35% + 3em) .5em 0;

<div class="select">
<input type="radio" name="fruit" id="if-focus" tabindex="0">
<label for="if-focus">
<span class="label">You choice: </span>
</label>
<ul class="options">
<li>
<input id="pepaya" type="radio" name="fruit" value="Pepaya" tabindex="0"/>
<label for="pepaya" data-title="Pepaya">Pepaya</label>
</li>
<li>
<input id="mangga" type="radio" name="fruit" value="Mangga" tabindex="0"/>
<label for="mangga" data-title="Mangga">Mangga</label>
</li>
<li>
<input id="pisang" type="radio" name="fruit" value="Pisang" tabindex="0"/>
<label for="pisang" data-title="Pisang">Pisang</label>
</li>
<li>
<input id="ket" type="radio" name="fruit" value="" tabindex="0"/>
<label for="ket" data-title="Ada di pasar minggu.">Pasar....</label>
</li>
</ul>
</label>
</div>

Source by: cdpn.io/gqdCi

Happy select \m/