Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Radio Và Checkbox Button Đẹp Hơn Cho Trang Web

Cách Tạo Radio Và Checkbox Button Đẹp Hơn Cho Trang Web


Ngày 28 Tháng 10 Năm 2020

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu những thư viện (CSS, Javascript) giúp bạn custom đối tượng checkbox và radio button trong trang web một cách dễ dàng nhanh chóng cùng với thiết kế đẹp mắt nhé!


Thư Viện Pretty Checkbox

Pretty Checkbox là một thư viện CSS giúp bạn có thể tạo ra những nút radio và button đẹp mắt cho trang web.

Cách Thiết lập Thư Viện Pretty Checkbox

Để thiết lập thư viện này cho trang web thì bạn có thể sử dụng một số cách sau đây nhé:

Cài đặt qua yarn: yarn add pretty-checkbox

Cài đặt qua npm: install pretty-checkbox

Cài đặt qua CDN:
https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css

Để dễ dàng hướng dẫn và thiết lập cho trang web thì mình sẽ sử dụng cách cài đặt thư viện thông qua CDN bằng đoạn mã dưới đây nhé:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tạo Radio Và Checkbox Bằng Thư Viện Pretty Checkbox</title>
    <link rel="stylesheet" href="  https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css">
</head>
<body>
</body>
</html>

Tạo CheckBox Cơ Bản Bằng Pretty Checkbox

Phần này chúng ta sẽ đi vào tạo một checkbox cơ bản bằng thư viện Pretty checkbox thông qua đoạn mã dưới đây nhé:

HTML

<div class="pretty p-default">
  <input type="checkbox" />
  <div class="state">
    <label>Hình Dạng Mặc Định</label>
  </div>
</div>

<!-- Sử Dụng Class p-curve -->
<div class="pretty p-default p-curve">
  <input type="checkbox" />
  <div class="state">
    <label>Hình Dạng Curve</label>
  </div>
</div>

<!-- Sử Dụng Class p-round -->
<div class="pretty p-default p-round">
  <input type="checkbox" />
  <div class="state">
    <label>Hình Tròn</label>
  </div>
</div>

Mình sẽ điều chỉnh vị trí của các đối tượng checkbox ra giữa màn hình bằng đoạn mã CSS sau nhé:

CSS

*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
body{
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     background: #1b2a49;
     color: white;
     font-family: 'Roboto', sans-serif;
     font-size: 16px;
}

Và kết quả cuối cùng bạn xem trên Codepen ở bên dưới nhé:

See the Pen Tạo CheckBox Cơ Bản Bằng Pretty Checkbox by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tạo CheckBox Fill Bằng Pretty Checkbox

Để tạo checkbox fill cho checkbox thì chúng ta có thể sử dụng class p-fill vào trong những đối tượng mà chúng ta muốn thiết lập. Để hiểu rõ hơn bạn xem đoạn mã dưới đây nhé:

<!-- Sử Dụng Class p-fill -->
<div class="pretty p-default p-fill">
  <input type="checkbox" />
  <div class="state">
    <label>Hình Dạng Mặc Định</label>
  </div>
</div>

<!-- Sử Dụng Class p-fill -->
<div class="pretty p-default p-curve p-fill">
  <input type="checkbox" />
  <div class="state">
    <label>Hình Dạng Curve</label>
  </div>
</div>

<!-- Sử Dụng Class p-fill -->
<div class="pretty p-default p-round p-fill">
  <input type="checkbox" />
  <div class="state">
    <label>Hình Tròn</label>
  </div>
</div>

Đoạn mã CSS mình sử dụng y như ví dụ trên nha. Bên dưới là kết quả nhé:

See the Pen Tạo CheckBox filln Bằng Pretty Checkbox by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tạo CheckBox Thick Bằng Pretty Checkbox

Phần tiếp theo chúng ta sẽ đi vào tạo checkbox thick thông qua class p-thick bằng đoạn mã bên dưới nhé:

HTML

<!-- Sử Dụng Class p-thick -->
<div class="pretty p-default p-thick">
  <input type="checkbox" />
  <div class="state">
    <label>Hình Dạng Mặc Định</label>
  </div>
</div>

<!-- Sử Dụng Class p-thick -->
<div class="pretty p-default p-curve p-thick">
  <input type="checkbox" />
  <div class="state">
    <label>Hình Dạng Curve</label>
  </div>
</div>

<!-- Sử Dụng Class p-thick -->
<div class="pretty p-default p-round p-thick">
  <input type="checkbox" />
  <div class="state">
    <label>Hình Tròn</label>
  </div>
</div>

Và kết quả bạn xem ở bên dưới nha:

See the Pen Tạo CheckBox thick Bằng Pretty Checkbox by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thiết Lập Màu Sắc Cho Checkbox

Thư viện này sử dụng cách đặt tên cho class màu sắc khá giống với Bootstrap ví dụ như là primary: màu xanh dương, danger: màu đỏ, success: màu xanh lá cây... Và để hiển thị màu sắc thì bạn chỉ cần gọi class theo cú pháp là:
p-color (Với color có thể là primary, danger, info...)

Để hiểu rõ hơn bạn xem đoạn mã dưới đây nhé:

HTML

<!-- Sử dụng class p-primary -->
<div class="pretty p-default">
  <input type="checkbox" />
  <div class="state p-primary">
    <label>Primary</label>
  </div>
</div>

<!-- Sử dụng class p-success -->
<div class="pretty p-default">
  <input type="checkbox" />
  <div class="state p-success">
    <label>Success</label>
  </div>
</div>

<!-- Sử dụng class p-info -->
<div class="pretty p-default">
  <input type="checkbox" />
  <div class="state p-info">
    <label>Info</label>
  </div>
</div>

<!-- Sử dụng class p-warning -->
<div class="pretty p-default">
  <input type="checkbox" />
  <div class="state p-warning">
    <label>Warning</label>
  </div>
</div>

<!-- Sử dụng class p-danger -->
<div class="pretty p-default">
  <input type="checkbox" />
  <div class="state p-danger">
    <label>Danger</label>
  </div>
</div>

Và kết quả bạn xem dự án Codepen bên dưới nhé:

See the Pen Tạo CheckBox color Bằng Pretty Checkbox by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tạo Nút Switch Với Pretty Checkbox

Để tạo nút switch(chuyển đổi trạng thái) bằng thư viện này thì bạn chỉ cần sử dụng class p-switch cho đối dượng mà chúng ta muốn thiết lập. Để hiểu rõ hơn bạn xem đoạn mã dưới đây nhé:

HTML

<!-- Sử dụng class p-switch -->
<div class="pretty p-switch">
  <input type="checkbox" />
  <div class="state">
    <label>Outline</label>
  </div>
</div>

<!--Sử dụng class p-switch -->
<div class="pretty p-switch p-fill">
  <input type="checkbox" />
  <div class="state">
    <label>Fill</label>
  </div>
</div>

<!-- Sử dụng class p-switch -->
<div class="pretty p-switch p-slim">
  <input type="checkbox" />
  <div class="state">
    <label>Slim</label>
  </div>
</div>

Và kết quả bạn xem ở dưới đây nha:

See the Pen Tạo CheckBox switch Bằng Pretty Checkbox by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thiết Lập Icon Cho checkbox

Trong phần này chúng ta sẽ đi vào tìm hiểu cách thay đổi các icon mặc định trong thư viện pretty checkbox bằng icon của Font-Awesome v4.7 nhé!

Có hai điều mình cần lưu ý là:

  • Khi muốn thay đổi icon thì phải đặt thêm class p-icon vào thẻ div có chứa class pretty.
  • Bạn phải đặt thêm class icon vào trong thẻ <i> của Font Awesome. Ví dụ
    <i class="icon fa fa-check" aria-hidden="true"></i>

Để hiểu rõ hơn bạn xem đoạn mã sau đây nhé:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tạo Radio Và Checkbox Bằng Thư Viện Pretty Checkbox</title>
    <link rel="stylesheet" href="  https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="pretty p-icon p-curve">
        <input type="checkbox" />
        <div class="state p-success">
            <i class="icon fa fa-check" aria-hidden="true"></i>
            <label> Kiểm Tra</label>
        </div>
    </div>
</body>
</html>

Do file CSS giống ở trên nên mình sẽ không viết lại nha. Và kết quả bạn xem dự án Codepen dưới đây nhé:

See the Pen Thay doi icon cho checkbox trong pretty checkbox by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tạo Hiệu Ứng Aniamtion cho Checkbox

Trong phần này chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng chuyển động cho checkbox thông qua một số class mà thư viện cung cấp như là p-smooth, p-jelly, p-tada, p-rotate, p-pulse. Để hiểu rõ hơn bạn xem đoạn mã dưới đây nhé:

HTML

<!--Sử dụng class p-smooth-->
<div class="pretty p-default p-smooth">
  <input type="checkbox" />
  <div class="state p-success">
    <label>p-smooth</label>
  </div>
</div>

<!--Sử dụng class p-jelly-->
<div class="pretty p-icon p-curve  p-jelly">
  <input type="checkbox" />
  <div class="state p-success">
    <i class="icon fa fa-check" aria-hidden="true"></i>
    <label>p-jelly</label>
  </div>
</div>

<!--Sử dụng class p-tada-->
<div class="pretty p-icon p-curve p-tada">
  <input type="checkbox" />
  <div class="state p-success">
    <i class="icon fa fa-check" aria-hidden="true"></i>
    <label> p-tada</label>
  </div>
</div>

<!--Sử dụng class p-rotate-->
<div class="pretty p-icon p-curve p-rotate">
  <input type="checkbox" />
  <div class="state p-success">
    <i class="icon fa fa-check" aria-hidden="true"></i>
    <label>p-rotate</label>
  </div>
</div>

<!--Sử dụng class p-pulse-->
<div class="pretty p-icon p-curve  p-pulse">
  <input type="checkbox" />
  <div class="state p-success">
    <i class="icon fa fa-check" aria-hidden="true"></i>
    <label>p-pulse</label>
  </div>
</div>

Và kết quả bạn xem bên dưới Codepen nhé:

See the Pen Thiet Lap hieu ung animation cho checkbox by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Xóa Border cho Checkbox

Thư viện này cung cấp cho chúng ta một tính năng khá hữu ích là hiển thị toàn bộ icon mà không chứa đường viền(border) của ô checkbox bằng việc sử class p-plain. Để hiểu rõ hơn bạn xem đoạn mã sau đây nhé:

HTML

<!--Sử dụng class p-plain-->
<div class="pretty p-icon p-round p-smooth p-plain">
  <input type="checkbox" />
  <div class="state p-success-o">
    <i class="icon fa fa-check" aria-hidden="true"></i>
    <label>p-plain</label>
  </div>
</div>

Và kết quả bạn xem dưới đây nha:

See the Pen Xóa Border cho Checkbox by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tạo Radion Button Bằng Thư Viện Pretty Checkbox

Việc tạo radion button khá giống với cách mà chúng ta tạo checkbox button ở trong thư viện pretty checkbox thông qua việc gắn các class ở ví dụ trên cho đối tượng và thay type="checkbox" sang type="radio. Và để hiểu rõ hơn chúng ta cùng xem đoạn mã sau nhé:

HTML

<div class="pretty p-default p-curve">
  <input type="radio" name="color" />
  <div class="state p-primary-o">
    <label>Primary</label>
  </div>
</div>

<div class="pretty p-default p-curve">
  <input type="radio" name="color" />
  <div class="state p-success-o">
    <label>Success</label>
  </div>
</div>

<div class="pretty p-default p-curve">
  <input type="radio" name="color" />
  <div class="state p-info-o">
    <label>Info</label>
  </div>
</div>

<div class="pretty p-default p-curve">
  <input type="radio" name="color" checked />
  <div class="state p-warning-o">
    <label>Warning</label>
  </div>
</div>

<div class="pretty p-default p-curve">
  <input type="radio" name="color" />
  <div class="state p-danger-o">
    <label>Danger</label>
  </div>
</div>

Và kết quả bạn xem bên dưới nhé:

See the Pen tao radio button bang pretty checkbox by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tạo Hiệu Ứng Animation Cho Radion Button

Chúng ta cũng sẽ sử dụng các class animation cho checkbox phía trên để áp dụng vào radio button thông qua đoạn mã sau đây nhé:

HTML

<div class="pretty p-icon p-curve p-tada">
  <input type="radio" name="radio66">
  <div class="state p-primary-o">
    <i class="icon fa fa-check" aria-hidden="true"></i>
    <label>HTML</label>
  </div>
</div>

<div class="pretty p-icon p-curve p-rotate">
  <input type="radio" name="radio66">
  <div class="state p-success-o">
    <i class="icon fa fa-check" aria-hidden="true"></i>
    <label> Javascript</label>
  </div>
</div>

<div class="pretty p-icon p-curve p-pulse">
  <input type="radio" name="radio66">
  <div class="state p-info-o">
    <i class="icon fa fa-check" aria-hidden="true"></i>
    <label> Python</label>
  </div>
</div>

<div class="pretty p-icon p-curve p-jelly">
  <input type="radio" name="radio66">
  <div class="state p-warning">
    <i class="icon fa fa-check" aria-hidden="true"></i>
    <label> PHP</label>
  </div>
</div>

<div class="pretty p-icon p-curve p-smooth">
  <input type="radio" name="radio66">
  <div class="state">
    <i class="icon fa fa-check" aria-hidden="true"></i>
    <label>Swift</label>
  </div>
</div>

Và kết quả bạn xem dưới đây nhé:

See the Pen tao raio button animation bang pretty checkbox by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Nếu bạn muốn tham khảo thêm về Pretty checkbox thì có thể truy cập ở đây nhé!

Các Thư Viện Khác Tạo Checkbox Cho Trang Web

iCheck

iCheck

Nguồn

Switchery

Switchery

Nguồn

jQuery Toggles

jQuery Toggles

Nguồn

Awesome Bootstrap Checkbox v1.0.0

Awesome Bootstrap Checkbox v1.0.0

Nguồn

CSS Checkbox Library

CSS Checkbox Library

Nguồn

Nếu bạn muốn them khảo tham về các Radion và Checkbox button khác thì có thể truy cập đường link bên dưới nhé!
https://www.niemvuilaptrinh.com/article/Nhung-Radio-Button-Dep-Cho-Thiet-Ke-Va-Phat-Trien-Web-2020

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức tạo checkbox và radion button hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!