CSS Radio Button – Cách sử dụng Radio Button trong CSS

CSS Radio Button là một phần tử HTML được sử dụng để lấy đầu vào từ người dùng. Nó được sử dụng khi có yêu cầu về chọn một lựa chọn duy nhất từ một nhóm các mục. Phần tử HTML này được sử dụng trên mọi trang web, nhưng không có kiểu dáng, nó sẽ trông giống nhau trên mọi trang web. Vì vậy, kiểu dáng cho phần tử này sẽ làm cho trang web của chúng ta khác biệt và hấp dẫn hơn.

Thiết kế nút radio bằng CSS là một nhiệm vụ thú vị và sáng tạo, đó sẽ cung cấp một diện mạo mới cho nút radio đã có sẵn. Để tạo ra các nút radio tùy chỉnh, chúng ta cần viết mã HTML và để tạo kiểu, chúng ta phải viết CSS. Các bước để tạo kiểu cho nút radio sẽ được rõ ràng hơn bằng cách sử dụng một số minh hoạ.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS Radio Button là gì ?

CSS Radio Button có thể được sử dụng bởi các nhà phát triển web và thiết kế web để tạo ra các trang web chuyên nghiệp và hấp dẫn với các phần tử radio được tùy chỉnh.

Nút radio là một phần tử HTML có thể được sử dụng để lấy đầu vào từ người dùng. Nó cho phép người dùng chọn một trong các tùy chọn duy nhất từ một nhóm các tùy chọn. Tuy nhiên, nút radio mặc định không có kiểu dáng, do đó, thiết kế lại nó bằng CSS sẽ giúp cải thiện diện mạo của trang web.

Hướng dẫn CSS Radio Button

Để tạo kiểu cho nút radio bằng CSS, trước tiên chúng ta phải viết mã HTML cho nút radio, sau đó viết CSS để tạo kiểu cho nó. Sau đây là các bước để tạo kiểu nút radio bằng CSS:

1. Bước 1: Viết mã HTML cho nút radio.

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>

Trong ví dụ trên, chúng ta có hai tùy chọn giới tính và chúng ta muốn người dùng chỉ có thể chọn một trong hai tùy chọn này.

2. Bước 2: Viết CSS để tạo kiểu cho nút radio.

input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid # ccc;
    outline: none;
}

input[type="radio"]:checked {
    background-color: # 3e8e41;
}

Trong đoạn mã trên, chúng ta đã loại bỏ kiểu mặc định của nút radio bằng cách sử dụng các thuộc tính -webkit-appearance, -moz-appearance và appearance. Sau đó, chúng ta đã thiết lập hình dạng và kích thước của nút radio bằng cách sử dụng các thuộc tính border-radius, width và height. Cuối cùng, chú 3. Bước 3: Thiết lập kiểu cho tùy chọn được chọn.

input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    background-color: # fff;
}

Đoạn mã trên sẽ thiết lập một vùng trống đằng trước phần tử nút radio được chọn và thêm một nền trắng vào trong vùng trống đó để tạo ra hiệu ứng nút radio được chọn.

4. Bước 4: Thêm hiệu ứng hover.

input[type="radio"]:hover {
    cursor: pointer;
}

input[type="radio"]:hover:not(:checked)::before {
    border: 2px solid # ccc;
}

Nếu người dùng di chuột qua nút radio, chúng ta muốn nó có hiệu ứng cursor để cho biết đó là một phần tử có thể tương tác. Chúng ta cũng muốn áp dụng một viền xung quanh phần tử nút radio không được chọn để cho phép người dùng biết rằng phần tử đó có thể được chọn.

Thêm ví dụ cụ thể cho thuộc tính CSS Radio Button

<input type="radio" name="color" value="red" />
<label for="red">Red</label>
<input type="radio" name="color" value="green" />
<label for="green">Green</label>
<input type="radio" name="color" value="blue" />
<label for="blue">Blue</label>

Để tùy chỉnh radio button, chúng ta cần thêm một số CSS vào file style.css:

radio {
  /* Đặt kích thước và hình dạng của radio button */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ccc;

  /* Đặt màu nền của radio button khi không được chọn */
  background-color: #fff;
}

.radio:checked {
  /* Đặt màu nền của radio button khi được chọn */
  background-color: #000;
}

.radio:focus {
  /* Đặt đường viền của radio button khi đang được tập trung */
  outline: none;
  box-shadow: 0 0 10px #000;
}

CSS này sẽ tạo ra các radio button có kích thước 20px x 20px, hình dạng tròn, viền 1px màu xám và màu nền màu trắng. Khi được chọn, radio button sẽ có màu nền màu đen. Khi đang được tập trung, radio button sẽ có đường viền màu đen và bóng mờ.

Ưu và Nhược điểm CSS Radio Button

Ưu điểm:

1. Tùy chỉnh: CSS Radio Button cho phép chúng ta tùy chỉnh các nút radio để phù hợp với thiết kế của trang web.
2. Tạo ra một diện mạo chuyên nghiệp: Thiết kế lại nút radio bằng CSS có thể tạo ra một diện mạo chuyên nghiệp và hấp dẫn cho trang web.

Nhược điểm:

1. Khó hiểu: Nếu người dùng chưa quen với các nút radio được tùy chỉnh bằng CSS, họ có thể không biết cách sử dụng chúng và điều này có thể gây khó khăn cho trải nghiệm người dùng.
2. Phức tạp: Thiết kế lại nút radio bằng CSS có thể là một quá trình phức tạp và tốn nhiều thời gian.

Lời khuyên CSS Radio Button

Khi thiết kế lại nút radio bằng CSS, chúng ta nên nhớ rằng điều quan trọng nhất là sự trải nghiệm người dùng. Chúng ta cần đảm bảo rằng các nút radio tùy chỉnh của chúng ta dễ sử dụng và dễ hiểu.

Ngoài ra, chúng ta cũng cần kiểm tra tính tương thích của các nút radio tùy chỉnh với các trình duyệt khác nhau để đảm bảo rằng trang web của chúng ta hoạt động tốt trên mọi nền tảng.