Style checkbox and readio button using CSS?

View: 411    Dowload: 0   Comment: 0   Post by: hanhga   Category: HTML-CSS template   Fields: Other

Example-1, Hide the boxes :

input[type=checkbox] {
    display: none;

Example-2, Stylize the before :

.radio label:before {
    border-radius: 8px;
.checkbox label:before {
    border-radius: 3px;

Example-3, Stylize the after :

input[type=radio]:checked {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
input[type=checkbox]:checked {
    content: "\2713";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 15px;
    color: #f3f3f3;
    text-align: center;
    line-height: 15px;

Style checkbox and readio button using CSS?

Style checkbox and readio button using CSS

Posted on 31-08-2016 


To comment you must be logged in members.

Files with category

File suggestion for you
File top downloads
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd