Give More Style for Select Tag using CSS - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Give More Style for Select Tag using CSS, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article CSS3, Article HTML, Article Snippet, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Give More Style for Select Tag using CSS
link : Give More Style for Select Tag using CSS

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/

Thus articles Give More Style for Select Tag using CSS

that is all articles Give More Style for Select Tag using CSS This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Give More Style for Select Tag using CSS with the link address https://autopostingblogspot.blogspot.com/2014/04/give-more-style-for-select-tag-using-css.html