Tất cả bài viết | CSS3

Cách tạo và định dạng checkbox bằng CSS3

Hướng dẫn tạo và định dạng checkbox bằng CSS3

Phần CSS

input[type=checkbox] 
{  
  display: none;
}

input[type=checkbox] + label 
{  
display: inline-block;  
background-color: #DB574D;  
color: white;  
font-family: sans-serif;  
font-size: 14px;  
font-weight: bold;  
height: 30px;  
line-height: 30px;  
position: relative;  
text-transform: uppercase;  
width: 80px;
}

input[type=checkbox] + label,input[type=checkbox] + label i {  
-webkit-transition: all 200ms ease;  
-moz-transition: all 200ms ease;  
-o-transition: all 200ms ease;  
transition: all 200ms ease;
}

input[type=checkbox]:checked + label {  
background-color: #67B04F;
}

input[type=checkbox] + label:before,input[type=checkbox] + label:after,input[type=checkbox] + label i {  
width: 50%;  
display: inline-block;  
height: 100%;  
text-align: center;
}

input[type=checkbox] + label:before {  
content: attr(data-text-true);
}

input[type=checkbox] + label:after {  
content: attr(data-text-false);
}

input[type=checkbox] + label i {  
top: 10%;  
background-color: white;  
height: 80%;  
left: 5%;  
position: absolute;  
width: 45%;
}

input[type=checkbox]:checked + label i {  
left: 50%;
}

Phần HTML

 Bạn có muốn học Khóa học Chuyên Viên Website Lành Nghề Online? 
 
 
 
   Bạn có muốn học Khóa học Lập Trình PHP CƠ Bản Online? 
 
 
 
   Bạn có muốn học khóa học Lập Trình HTML5/CSS3/RWD/JS Online 
 
 
 
   Bạn có muốn học khóa học Thiết Kế Giao Diện Website Online