Pengenalan Pseudo Class ::Focus pada CSS3

Haii, kembali lagi pada artikel saya setelah sebelumnya saya telah membawakan materi tentang pseudo element nah untuk kali ini masih dengan tema yang sama yaitu tentang pseudo element , yaitu pseudo :: focus. Kegunaan pseudo focus adalah memberi style pada element saat kursuor kita fokuskan ke suatu element. Untuk lebih jelasnya langsung saja di simak demo di bawah ini .

Silahkan kalian salin code di bawqah ini dan jalankan di masing-masing browser kalian ya :

HTML//

<div class="container">
  <p></p>
  <div class="element">
  
    <textarea name="area" id="area" cols="30" rows="10">Focus me</textarea>
  
  </div>
</div>

Di sini saya menggunakan text area untuk mencontohkannya y ang mana nanti saat kursor saya fokuskan pada text area maka text area tersebut akan berunah warna background.

Silahkan salin juga code css di bawah :

CSS//

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

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



textarea{
  padding: .5em;
  display: block;
  width: 100%;
  margin-bottom: .5em;
}


textarea:focus {
  background-color: #FFFF66;
}

Setalah kalian szalin silahkan di jalankan pada browser masing-masing dan lihat hasilnya, kira-kira hasilnya akan seperti ini :

Textarea akan berubah warnanya saat kita fokuskan . Itulah gunanya dari pseudo ::focus, Semoga bermanfat dan sampai bertemu pada artikel selanjutnya.

Pengenalan Pseudo Class ::Focus pada CSS3

Kategori