Efek Focus

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 9 dari 43.

pseudo-class :focus memungkinkan kamu memberi gaya pada elemen saat elemen tersebut mendapat fokus, misalnya saat kamu mengekliknya atau menelusuri elemen menggunakan tombol tab pada keyboard. Ini cara yang bagus untuk menyorot elemen yang sedang kamu gunakan! Contohnya:

<input type="text">

Atur gaya input saat mendapat fokus:

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

Saat pengguna mengeklik atau berpindah ke kolom input ini dengan tombol Tab, warna batasnya akan berubah menjadi biru dan bayangan biru lembut akan muncul di sekelilingnya.

Tantangan

Mudah

Buat aturan CSS yang menerapkan gaya khusus pada input teks saat mendapatkan fokus.

Saat mendapatkan fokus, ubah border menjadi oranye rgb(255, 152, 0)
Saat mendapatkan fokus, tambahkan warna latar kuning rgb(255, 243, 224)

Coba sendiri

<!DOCTYPE html>
<html>
<head>
     <title>Focus Effects</title>
  <style>
    input{
      border: 2px solid gray;
      padding: 8px;
      outline: none;
    }
     /* Write your CSS here */
    
  </style>
</head>
<body>
  <h3>Focus Effects Demo</h3>
  <input type="text" placeholder="Type here...">
  <button>Click Me</button>
</body>
</html>