Di tutorial ini kita akan mengenal dan membahas Apa Kegunaan Dari Properti Appearance Pada Css , Penggunaan paling umum dari properti ini pada saat ini adalah untuk mengatur ulang gaya default menggunakan tampilan: none.
Oke pertanyaanya sesuai judulnya , Apa Kegunaan Dari Properti Appearance Pada Css ? properti ini berguna untuk memberikan control kepada kita untuk sepenuhnya mengatur tampilan atau style dari suatu form-control dengan menggunakan value:none;
bentuk penulisanya seperti ini :
appearance: none
misal kita coba pada suatu elemen dari fom yaitu <select></select> :
HTML
<div class="select-wrapper"> <select> <option>Athletics</option> <option>Basketball</option> <option>Diving</option> <option>Gymnastics</option> </select> </div>
CSS
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: -webkit-linear-gradient(left, #ffbfbf 0%, #ffe6bf 13%, #fffcbf 27%, #c6ffbf 41%, #bffffd 57%, #bfc7ff 71%, #e8bfff 86%, #ffbfd7 100%); background: linear-gradient(to right, #ffbfbf 0%, #ffe6bf 13%, #fffcbf 27%, #c6ffbf 41%, #bffffd 57%, #bfc7ff 71%, #e8bfff 86%, #ffbfd7 100%); border-radius: 0; border: 2px solid darkslategrey; cursor: pointer; font-size: 1.2em; padding: 0.25em 1em 0.25em 0.25em; } .select-wrapper { display: inline-block; position: relative; } .select-wrapper:after { content: ''; width: 0; position: absolute; right: 7px; top: 50%; margin-top: -3px; border-width: 6px 4px; border-style: solid; pointer-events: none; border-color: darkslategrey transparent transparent transparent; }
Hasilnya seperti ini :
kita bisa dengan sepenuhnya mengatur style dari suatau default style element,
baiklah itu saja dari saya tentang Apa Kegunaan Dari Properti Appearance Pada Css , semoga bermanfaat dan sampai bertemu pada artiel selanjutnya.