×

Chọn phần tử điều khiển form không thể sử dụng - :disabled - trong CSS

Avatar of admin
admin 0 Views

Khi phát triển các trang web và ứng dụng, việc điều khiển các phần tử form là một yếu tố quan trọng giúp tối ưu hóa trải nghiệm người dùng. Một trong những tính năng hữu ích của CSS là khả năng kiểm soát trạng thái của các phần tử thông qua thuộc tính :disabled. Tuy nhiên, không phải tất cả các phần tử trong form đều có thể áp dụng trạng thái :disabled này. Bài viết này sẽ tìm hiểu chi tiết về các phần tử có thể và không thể sử dụng thuộc tính :disabled trong CSS.

Các Phần Tử Form Có Thể Sử Dụng :disabled

Trước hết, hãy xem xét những phần tử thường gặp mà có thể bị vô hiệu hóa bằng cách sử dụng thuộc tính :disabled:

  1. Nút Bấm (Button):

    <button type="button" disabled>Click me</button>

    Nút bấm có thể dễ dàng bị vô hiệu hóa, làm cho người dùng không thể nhấn vào chúng.

  2. Ô Nhập Liệu (Input):

    <input type="text" disabled>

    Các ô nhập liệu cũng có thể bị vô hiệu hóa để ngăn người dùng thay đổi giá trị.

  3. Ô Chọn (Checkbox) và Nút Radio (Radio Button):

    <input type="checkbox" disabled>
<input type="radio" disabled>

    Các ô chọn và nút radio có thể bị vô hiệu hóa để hạn chế lựa chọn của người dùng.

  4. Select (Danh Sách Drop-Down):

    <select disabled>
   <option>Option 1</option>
</select>

    Cho phép vô hiệu hóa cả danh sách thả xuống.

  5. Textarea:

    <textarea disabled></textarea>

    Textarea cũng có thể được vô hiệu hóa để ngăn việc nhập liệu.

Phần Tử Form Không Thể Sử Dụng :disabled

Mặc dù thuộc tính :disabled rất tiện dụng, nhưng không phải tất cả các phần tử form đều hỗ trợ trạng thái này. Dưới đây là một số phần tử không thể áp dụng thuộc tính :disabled:

  1. <fieldset>:

    <fieldset disabled></fieldset>

    Fieldset không thể bị vô hiệu hóa trực tiếp với CSS bởi vì :disabled không áp dụng cho thuộc tính này. Tuy nhiên, các phần tử con bên trong fieldset sẽ bị ảnh hưởng nếu được bao bọc bởi fieldset với thuộc tính disabled.

  2. <label>:

    <label disabled>Label Text</label>

    <label> không thể bị vô hiệu hóa trực tiếp. Thuộc tính :disabled không có tác dụng với các phần tử nhãn.

  3. <option> (trong HTML):

    <option disabled>Option</option>

    Mặc dù thuộc tính gốc disabled có thể được sử dụng trực tiếp trong HTML, nhưng CSS :disabled sẽ không thể áp dụng trực tiếp trên các phần tử option.

  4. <legend>:

    <legend disabled>Legend Text</legend>

    Phần tử legend cũng không thể sử dụng thuộc tính :disabled.

Cách Sử Dụng CSS Để Kiểm Soát Trạng Thái Bị Vô Hiệu Hóa

Để áp dụng các hiệu ứng phong cách cho các phần tử bị vô hiệu hóa, chúng ta có thể sử dụng thuộc tính giả :disabled trong CSS:

input:disabled,
button:disabled {
   background-color: #ccc;
   color: #666;
}

Các đoạn mã trên sẽ thay đổi màu nền và màu chữ của các phần tử nhập liệu và nút bấm khi chúng ở trạng thái bị vô hiệu hóa.

Kết Luận

Việc sử dụng thuộc tính :disabled trong CSS là một phương pháp hiệu quả để kiểm soát truy cập và tương tác của người dùng với các phần tử form trên trang web. Tuy nhiên, cần lưu ý rằng không phải tất cả các phần tử đều hỗ trợ thuộc tính này, và việc hiểu rõ giới hạn của :disabled sẽ giúp các nhà phát triển thiết kế giao diện người dùng trực quan và hiệu quả hơn.

Comments

Bài viết liên quan