Apa Kegunaan Dari Properti Appearance Pada Css

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.