Apa Kegunaan Dari Properti Appearance Pada Css

Di panduan ini kita akan mengenal dan membahas Apa Kegunaan Dari Properti Appearance Di Css , Pemakaian sangat umum dari properti ini di dikala ini ialah bagi mengatur ulang gaya default menggunakan tampilan: none. 

 

Oke pertanyaanya sesuai judulnya , Apa Kegunaan Dari Properti Appearance Di Css ? properti ini bermanfaat bagi memberikan control kepada kita bagi sepenuhnya mengatur tampilan atau style dari suatu form-control dengan menggunakan value:none;

wujud penulisanya seperti ini :

appearance: none

misal kita coba di suatu faktor 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 dapat dengan sepenuhnya mengatur style dari suatau default style element,

baiklah itu saja dari saya mengenai Apa Kegunaan Dari Properti Appearance Di Css , semoga bermanfaat dan hingga bertemu di artiel berikutnya.

Sumber https://kursuswebsite.org