Tùy Chỉnh Checkbox Và Radio Button Chỉ Với CSS

Khi tạo form, đôi khi cần dùng checkbox và radio button để thu thập sở thích người dùng, đồng ý điều khoản, hoặc dữ liệu nhân khẩu học. Các input HTML như checkbox hay radio button có giao diện mặc định. Nếu muốn thay đổi giao diện, bạn có thể dùng CSS để tùy chỉnh theo ý thích. Bài viết này demo cách tùy chỉnh checkbox và radio input cho form hoặc trang web.

Cấu Trúc HTML

Khung HTML cơ bản để style về cơ bản giống nhau cho cả checkbox và radio button.

Container chính cho một checkbox/radio button là phần tử label. Bên trong có input với type phù hợp và một span hiển thị trạng thái đã chọn hay chưa.

<html> 
  <head> 
    <style> /* CSS sẽ viết sau */ </style> 
  </head> 
  <body> 
    <h2>Radio Button and Checkbox CSS Example</h2> 
    <label class="input">One <input type="radio" name="radio-example" checked="checked"> <span class="checkmark fill"></span> </label> 
    <label class="input">Two <input type="radio" name="radio-example"> <span class="checkmark fill"></span> </label> 
    <label class="input">Three <input type="radio" name="radio-example"> <span class="checkmark fill"></span> </label> 
    <h2>Checkbox Example</h2> 
    <label class="input">Four <input type="checkbox" name="radio-example"> <span class="checkmark fill"></span> </label> 
    <label class="input">Five <input type="checkbox" name="radio-example"> <span class="checkmark fill"></span> </label> 
    <script href="script.js"></script> 
  </body> 
</html>

Nhóm đầu là radio button: dùng khi người dùng chỉ chọn một lựa chọn từ nhiều选项.

Nhóm sau là checkbox: dùng khi người dùng có thể chọn nhiều lựa chọn, hoặc chỉ cần đồng ý/không đồng ý, có/không.

Các phần tử HTML này có giao diện mặc định. Nhưng bạn hoàn toàn có thể tùy chỉnh chúng bằng CSS!

Cấu Trúc CSS

Để thay đổi style radio button hoặc checkbox, hãy phân tích vấn đề theo các bước:

Tùy chỉnh label
1. Display property
2. Position relative
3. Cursor pointer
4. Margin và padding cho đẹp mắt
Ẩn checkbox mặc định
1. Display property
Tạo container làm checkbox tùy chỉnh
1. Height, Width
2. Background
3. Position absolute
4. Top, left values
Thêm hiệu ứng hover (ví dụ: đổi background color)
Đổi background color khi checked
Ẩn checkmark/hình tròn khi chưa checked
Hiện checkmark/hình tròn khi checked
Style cho checkmark
Style cho hình tròn (radio)

Trước khi xem code giải pháp, khuyên bạn tự thử làm theo khung HTML và các bước phân tích trên.

Code Giải Pháp:

<html> 
  <head> 
    <style> 
      /* Tùy chỉnh label (input container) */
      label { 
        display: block; 
        position: relative; 
        padding-left: 35px; 
        margin-bottom: 12px; 
        cursor: pointer; 
        font-size: 22px; 
        -webkit-user-select: none; 
        -moz-user-select: none; 
        -ms-user-select: none; 
        user-select: none; 
      } 
      /* Ẩn checkbox mặc định của trình duyệt */
      label input { 
        position: absolute; 
        opacity: 0; 
        cursor: pointer; 
        height: 0; 
        width: 0; 
      } 
      /* Tạo container checkbox tùy chỉnh */
      .checkmark, .link { 
        position: absolute; 
        top: 0; 
        left: 0; 
        height: 25px; 
        width: 25px; 
        background-color: #eee; 
      } 
      /* Border radius cho radio button */
      .circle { 
        border-radius: 50%; 
      } 
      /* Hover: đổi background */
      label:hover input ~ .checkmark { 
        background-color: #ccc; 
      } 
      /* Checked: background xanh */
      label input:checked ~ .checkmark { 
        background-color: #2196F3; 
      } 
      /* Tạo checkmark/hình tròn (ẩn khi chưa checked) */
      .checkmark:after { 
        content: ""; 
        position: absolute; 
        display: none; 
      } 
      /* Hiện checkmark khi checked */
      label input:checked ~ .checkmark:after { 
        display: block; 
      } 
      /* Style checkmark (checkbox) */
      label .checkmark:after { 
        left: 10px; 
        top: 3px; 
        width: 5px; 
        height: 15px; 
        border: solid white; 
        border-width: 0 3px 3px 0; 
        -webkit-transform: rotate(45deg); 
        -ms-transform: rotate(45deg); 
        transform: rotate(45deg); 
      } 
      /* Style hình tròn (radio button) */
      label .circle:after { 
        width: 15px; 
        height: 15px; 
        border: none; 
        background: white; 
        border-radius: 50%; 
        left: 20%; 
        top: 20%; 
      } 
    </style> 
  </head> 
  <body> 
    <h2>CSS Radio Button and Checkbox Example</h2> 
    <label class="input">One <input type="radio" name="radio-example" checked> <span class="checkmark circle"></span> </label> 
    <label class="input">Two <input type="radio" name="radio-example"> <span class="checkmark circle"></span> </label> 
    <label class="input">Three <input type="radio" name="radio-example"> <span class="checkmark circle"></span> </label> 
    <h2>Checkbox Example</h2> 
    <label class="input">Four <input type="checkbox" name="radio-example" checked> <span class="checkmark"></span> </label> 
    <label class="input">Five <input type="checkbox" name="radio-example"> <span class="checkmark"></span> </label> 
    <label class="input">Six <input type="checkbox" name="radio-example"> <span class="checkmark"></span> </label> 
  </body> 
</html>

Đã xong! Ví dụ radio button và checkbox chỉ với CSS. Có thể hơi khó hiểu lúc đầu, nhưng bạn sẽ nắm được! Nếu vượt qua được bài tập CSS này, bạn đã sẵn sàng cho các chủ đề khó hơn.