Hiệu ứng tiêu điểm

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 9 trên 43.

Lớp giả :focus cho phép bạn định kiểu cho một phần tử khi phần tử đó nhận tiêu điểm, chẳng hạn khi bạn nhấp vào hoặc dùng phím Tab trên bàn phím để di chuyển đến phần tử đó. Đây là cách tuyệt vời để làm nổi bật phần tử bạn đang tương tác! Ví dụ:

<input type="text">

Tạo kiểu cho input khi nhận tiêu điểm:

input {
  border: 2px solid #ccc;
}

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

Khi người dùng nhấp vào hoặc di chuyển đến trường nhập liệu này bằng phím Tab, đường viền sẽ chuyển sang màu xanh lam và một bóng xanh lam nhạt sẽ xuất hiện xung quanh trường.

Thử thách

Dễ

Tạo một quy tắc CSS áp dụng kiểu định dạng đặc biệt cho ô nhập văn bản khi ô nhận tiêu điểm.

Khi nhận tiêu điểm, đổi đường viền thành màu cam rgb(255, 152, 0)
Khi nhận tiêu điểm, thêm màu nền vàng rgb(255, 243, 224)

Tự làm thử

<!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>