Pengenalan Pseudo class ::In-range dan ::Out-of-range pada CSS3

Hai teman-teman kembali lagi pada artikel saya , masih dengan tema yang sama dari artikel kemarin-kemarin yaitu tentang pseudo class. Kali ini saya akan memberikan satu lagi sebuah pseudo class yang akan membantu kita dalam membuat layout website dengan menggunakan HTML dan CSS 3 , nama pseudo classnya adalah Pseudo class ::In-range Dan ::Out-of-range .

Pseudo class in::range adalah sebuah pseudo class dimana kita dapat memberikan style pada suatu element yang memiliki limit atau range tertentu selama value nya masih di dalam range. Sementara untuk pseudo class out-of-range adalah kebalikan dari in-range dimana kita dapat memberikan style pada element yang memiliki limit atau range setelah valuenya tidak sama dengan range yang telah di berikan atau bisa di sebut out of range (keluar dari range).

Untuk lebih jelasnya silahkan lihat demo di bawah ini :

Salin code berikut :

HTML//

<div class="container">
  <input id="range" type="number" min="1" max="10" value="8">
  <label for="range"></label>
</div>

CSS//

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

input {
  width: 100px;
  height: 40px;
  font-size: 1.4em;
  margin-right: .6em;
}

input[type="number"]:in-range {
  background-color: lightgreen;
  color: green;
}

input:in-range + label::after {
  content: "Choose a value between 1 and 10.";
}

input[type="number"]:out-of-range {
  background-color: salmon;
  border: 1px solid tomato;
  color: white;
}

input:out-of-range + label::after {
  content: "This value is out of range! Pick another one.";
  color: tomato;
}

Jika kalian jalankan maka tampilanya akan seperti ini :

Pada gambar di atas menjelaskan jika element input number tersebut memiliki value range dari 1 sampai 10 dan jika kita beri nilai labih dari sepuluh (out of range) maka saya akan memberikan style mengubah background menjadi warna merah dan memberikan label peringatan bahwa angka yang kalian masukan sudah out of range atau melebihi batas seperti di gambar berikut :

Oke itu salah satu kegunaan dari pseudo class in-range dan out-of range, semoga bermanfaat dan sampai bertemu pada artikel selanjutnya.

Terimakasih. see you 🙂

Pengenalan Pseudo class ::In-range dan ::Out-of-range pada CSS3

Kategori