Định dạng trạng thái của các phần tử

10.1 Pseudo-class :focus

Pseudo-classes CSS cung cấp công cụ tuyệt vời để định dạng các phần tử trong các trạng thái khác nhau. Nhờ vậy, có thể cải thiện sự tương tác của người dùng với các form và các phần tử tương tác khác trên trang web. Hãy cùng xem cách sử dụng pseudo-classes như :focus, :hover, :disabled và :checked để định dạng các phần tử đầu vào (<input>).

Pseudo-class :focus áp dụng cho phần tử form khi nó nhận được focus. Thường điều này xảy ra khi click chuột vào phần tử hoặc chuyển đến nó bằng phím Tab. Định dạng các phần tử có thể focus giúp người dùng dễ dàng định hướng hơn trong form.

Ví dụ sử dụng:

    
      input:focus {
        border-color: #4A90E2;
        box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
        outline: none;
      }
    
  

    
      <form>
        <label for="name">Tên:</label>
        <input type="text" id="name" name="name">
      </form>
    
  

Giải thích

• border-color: thay đổi màu viền của phần tử khi nó nhận focus
• box-shadow: thêm hiệu ứng đổ bóng xung quanh phần tử để làm nổi bật nó
• outline: bỏ viền mặc định của trình duyệt, thay bằng kiểu dáng tùy chỉnh

10.2 Pseudo-class :hover

Pseudo-class :hover áp dụng cho phần tử khi người dùng đưa chuột vào nó. Điều này có thể hữu ích để cung cấp phản hồi hình ảnh khi tương tác với phần tử.

Ví dụ sử dụng:

    
      input:hover {
        border-color: #50E3C2;
        background-color: #F0F8FF;
      }
    
  

    
      <form>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
      </form>
    
  

Giải thích

• border-color: thay đổi màu viền của phần tử khi con trỏ chuột ở trên nó
• background-color: thay đổi màu nền của phần tử khi con trỏ chuột ở trên nó

10.3 Pseudo-class :disabled

Pseudo-class :disabled áp dụng cho các phần tử form bị vô hiệu hóa, tức là không hoạt động và không thể được sử dụng hoặc thay đổi bởi người dùng. Điều này giúp người dùng hiểu rằng phần tử không thể tương tác được.

Ví dụ sử dụng:

    
      input:disabled {
        background-color: #E0E0E0;
        color: #A0A0A0;
        cursor: not-allowed;
      }
    
  

    
      <form>
        <label for="username">Tên người dùng:</label>
        <input type="text" id="username" name="username" disabled>
      </form>
    
  

Giải thích

• background-color: thay đổi màu nền của phần tử bị vô hiệu hóa, để hiển thị rằng nó không hoạt động
• color: thay đổi màu văn bản bên trong phần tử bị vô hiệu hóa
• cursor: thiết lập con trỏ ở trạng thái "not-allowed", để chỉ ra rằng phần tử không thể sử dụng được

10.4 Pseudo-class :checked

Pseudo-class :checked áp dụng cho các phần tử loại checkbox và radio đang ở trạng thái được chọn. Điều này cho phép định dạng các phần tử được chọn, làm cho chúng nổi bật hơn.

Ví dụ sử dụng:

    
      input[type="checkbox"]:checked,
      input[type="radio"]:checked {
        background-color: #4A90E2;
        border-color: #4A90E2;
      }
    
  

    
      <form>
        <label>
          <input type="checkbox" name="option" checked>
          Tùy chọn 1
        </label>
        <label>
          <input type="checkbox" name="option">
          Tùy chọn 2
        </label>
        <label>
          <input type="radio" name="choice" checked>
          Lựa chọn 1
        </label>
        <label>
          <input type="radio" name="choice">
          Lựa chọn 2
        </label>
      </form>
    
  

Giải thích

• background-color: thay đổi màu nền của phần tử được chọn
• border-color: thay đổi màu viền của phần tử được chọn