Hướng dẫn radio color css - màu radio css

Question

Nội dung chính Show

Thực hiện
1. Tạo HTML
2. Tạo css
3. Kết luận.

Đã đăng vào thg 3 25, 2017 4:59 SA 2 phút đọc 2 phút đọc

Radio button là 1 thành phần HTML thường được sử dụng khá nhiều trong trang web. Tuy nhiên, dạng mặc định của

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

1 nhìn khá thô sơ và không đẹp mắt. Hôm nay, mình xin hướng dẫn các bạn cách để style cho radio button trở nên đẹp hơn với việc chỉ cần dùng CSS3 chứ không cần phải sử dụng đến Javascript.

Thực hiện

Đầu tiên, ta có cấu trúc HTML cho 2

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

1 như sau:

<div class="container">	
	<h2>Radio button style</h2>	
  <ul>
  <li>
    <input type="radio" id="f-option" name="selector">
    <label for="f-option">HTML</label>    
    <div class="check"></div>
  </li>  
  <li>
    <input type="radio" id="s-option" name="selector">
    <label for="s-option">CSS</label>
    <div class="check"><div class="inside"></div></div>
  </li>
</ul>
</div>

Trong cấu trúc HTML trên, với mỗi thành phần

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

3 có

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

4 là 1

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

1, ta thêm 1 thẻ

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

6 cùng cấp với thẻ

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

4. Thẻ

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

6 này sẽ đóng vai trò cực kỳ quan trọng là hiển thị thay thế cho 2

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

1 mặc định, còn cụ thể thực hiện như thế nào chúng ta sẽ cùng tìm hiểu ngay sau đây. Tiếp theo, ta dùng CSS để style cho các thành phần bao ngoài

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

1 để cho dễ nhìn hơn.Tiếp theo, ta dùng CSS để style cho các thành phần bao ngoài
.container{ display: block; position: absolute; margin: auto; height: 450px; width: 400px; bottom: 0; left:0; right: 0; top:0; padding: 0; } h2 { color: #AAAAAA; font-weight: normal; } .container ul{ list-style: none; height: 100%; width: 100%; margin: 0; padding: 0; } ul li{ color: #AAAAAA; display: block; position: relative; float: left; width: 100%; height: 100px; border-bottom: 1px solid #111111; }
1 để cho dễ nhìn hơn.

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

Bây giờ là việc quan trọng nhất, xử lý sự kiện cho radio button Ý tưởng ở đây sẽ là ta sẽ dùng CSS ẩn

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

1 mặc định của HTML đi, dựa vào sự kiện
ul li input[type=radio]{ position: absolute; visibility: hidden; }
2 và
ul li input[type=radio]{ position: absolute; visibility: hidden; }
3 của
.container{ display: block; position: absolute; margin: auto; height: 450px; width: 400px; bottom: 0; left:0; right: 0; top:0; padding: 0; } h2 { color: #AAAAAA; font-weight: normal; } .container ul{ list-style: none; height: 100%; width: 100%; margin: 0; padding: 0; } ul li{ color: #AAAAAA; display: block; position: relative; float: left; width: 100%; height: 100px; border-bottom: 1px solid #111111; }
1, sau đó dùng CSS3 để bắt sự kiện của
.container{ display: block; position: absolute; margin: auto; height: 450px; width: 400px; bottom: 0; left:0; right: 0; top:0; padding: 0; } h2 { color: #AAAAAA; font-weight: normal; } .container ul{ list-style: none; height: 100%; width: 100%; margin: 0; padding: 0; } ul li{ color: #AAAAAA; display: block; position: relative; float: left; width: 100%; height: 100px; border-bottom: 1px solid #111111; }
1 và kết hợp style cho thẻ
ul li input[type=radio]{ position: absolute; visibility: hidden; }
6, từ đó dùng CSS3 để xử lý cho thẻ div này hoạt động giống như 1
.container{ display: block; position: absolute; margin: auto; height: 450px; width: 400px; bottom: 0; left:0; right: 0; top:0; padding: 0; } h2 { color: #AAAAAA; font-weight: normal; } .container ul{ list-style: none; height: 100%; width: 100%; margin: 0; padding: 0; } ul li{ color: #AAAAAA; display: block; position: relative; float: left; width: 100%; height: 100px; border-bottom: 1px solid #111111; }
1. Trước tiên, ta ẩn
.container{ display: block; position: absolute; margin: auto; height: 450px; width: 400px; bottom: 0; left:0; right: 0; top:0; padding: 0; } h2 { color: #AAAAAA; font-weight: normal; } .container ul{ list-style: none; height: 100%; width: 100%; margin: 0; padding: 0; } ul li{ color: #AAAAAA; display: block; position: relative; float: left; width: 100%; height: 100px; border-bottom: 1px solid #111111; }
1 mặc định đi. Ý tưởng ở đây sẽ là ta sẽ dùng CSS ẩn

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

1 mặc định của HTML đi, dựa vào sự kiện

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

2 và

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

3 của

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

1, sau đó dùng CSS3 để bắt sự kiện của

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

1 và kết hợp style cho thẻ

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

6, từ đó dùng CSS3 để xử lý cho thẻ div này hoạt động giống như 1

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

1. Trước tiên, ta ẩn

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

1 mặc định đi.

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

Style cho

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

9 và thẻ

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}
ul li:hover label{
	color: #FFFFFF;
}
ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}
ul li:hover .check {
  border: 5px solid #FFFFFF;
}
ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
	left: 5px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

0

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}
ul li:hover label{
	color: #FFFFFF;
}
ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}
ul li:hover .check {
  border: 5px solid #FFFFFF;
}
ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
	left: 5px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

Cuối cùng là phần quan trọng nhất, xử lý sự kiện

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

2 của

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

1 kết hợp với thẻ

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}
ul li:hover label{
	color: #FFFFFF;
}
ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}
ul li:hover .check {
  border: 5px solid #FFFFFF;
}
ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
	left: 5px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

0

input[type=radio]:checked ~ .check {
  border: 5px solid #0DFF92;
}
input[type=radio]:checked ~ .check::before{
  background: #0DFF92;
}

Trong đoạn CSS trên ta kết hợp sự kiện của

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

1 là checked và

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}
ul li:hover label{
	color: #FFFFFF;
}
ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}
ul li:hover .check {
  border: 5px solid #FFFFFF;
}
ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
	left: 5px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

0 thông qua sự kết các elements HTML của CSS bằng cú pháp

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}
ul li:hover label{
	color: #FFFFFF;
}
ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}
ul li:hover .check {
  border: 5px solid #FFFFFF;
}
ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
	left: 5px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

6. Khi lick vào

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

1 thì sẽ sinh ra sự kiện là

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}
ul li:hover label{
	color: #FFFFFF;
}
ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}
ul li:hover .check {
  border: 5px solid #FFFFFF;
}
ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
	left: 5px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

8, ta sẽ dựa vào đó để style cho

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}
ul li:hover label{
	color: #FFFFFF;
}
ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}
ul li:hover .check {
  border: 5px solid #FFFFFF;
}
ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
	left: 5px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

0 thông qua sự kiện của

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

1. Trên đây là bài viết ngắn mình muốn giới thiệu cho mọi người 1 số tính năng khá hữu dụng khi kết hợp giữa HTML và CSS(CSS3). Xin cảm ơn mọi người đã đọc bài viết. Tham khảo: https://codepen.io/AngelaVelasquez/pen/Eypnq

Đã đăng vào thg 10 21, 2019 12:36 SA 2 phút đọc 2 phút đọc

Một ngày buồn và cạn hết nguồn ý tưởng ko biết viết gì để chia sẻ kiến thức với các bạn . Thôi nay mình chia sẻ tips đơn giản hướng dẫn các bạn style checkbox, radio button không giống như mặc định ban đầu của checkbox và radio button chỉ với csscss
Để giúp cho các bạn tự làm được tôi sẽ hướng dẫn với radio button còn các bạn có thể tự làm với checkbox thông qua bài làm của tôi

1. Tạo HTML

Chúng ta tạo các input với radio theo sau là label sao cho id của input bằng for của label như đoạn code bên dưới đây

<div class="radio">
    <input type="radio" id="radio1" name="group-radio" />
    <label for="radio1">I love</label>
  </div>

2. Tạo css

Đầu tiên chúng ta nên ẩn input đi và mọi style chúng ta làm trong label bằng đoạn code dưới đây.input đi và mọi style chúng ta làm trong label bằng đoạn code dưới đây.

input[type="radio"] { {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
  }

đoạn này bạn cũng có thể thay bằng đoạn code sau:

input[type="radio"] { {
    display: none;
  }

Tiếp theo ta style cho labellabel

label {
    padding-left: 35px; // Khoảng cách này để mình chứa style cho ô radio
    position: relative;
    margin: 0;
    line-height: 20px;
 }

Bây giờ chúng ta style cho cái nút radio
- Tạo vòng tròn bao ngoài nút radio. Chúng ta cho label bằng relative và tạo ra nút vòng bao ngoài radio với :before

label:before {
	 width: 20px;
	 height: 20px;
	 border-radius: 50%;
	 position: absolute;
	 top: 50%;
	 tranform: translateY(-50%);
	 left: 0;
	 content: '';
	 background: #fff;
	 border: 1px solid black;
}

Tạo nút bên trong radio khi input: checked. Bằng cách sau:

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

0

Chỉ với vài dòng code đơn giản chúng ta đã tuỳ chỉnh dc radio button theo ý mình.
Tương tự với checkbox cũng vậy. Các bạn chỉ cần chú ý đoạn code này input[type="radio"]:checked + labelinput[type="radio"]:checked + label
https://codepen.io/ngc-yn/pen/MWWjVQa

3. Kết luận.

Như vậy trong bài viết này mình đã hướng dẫn cách làm sao để có thể style lại các radio button, tương tự các bạn hãy thử làm với checkbox để xem mình hiểu bài ko nhé . Cảm ơn các bạn đã đọc bài viết của mình.
Demo với checkbox https://codepen.io/ngc-yn/pen/vYYXRoQ