blog post

Checkboxes is a HTML element that is possibly used on every website, but most people don't style them so they look the same as on every other site. Why not make your site look different by styling your checkboxes, you could even make them look nothing like checkboxes. In this tutorial we are going to create checkboxes which you can use on your website.

input[type=checkbox]:before{
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 10px;
    position: absolute;
    background-color: #f5f5f5;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(152, 129, 129, 0.8);
    border-radius: 2px;
}

input[type=checkbox]:checked:before {
 content: "\2713";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 10px;
    font-weight: bold;
    color: #000;
    text-align: center;
    line-height: 15px;
}

  • Share This Story


Pleas give your valuable comments to improve the contents.

about author

Atul kumar shukla


I'm Atul Kumar Shukla, working as a web developer.
Welcome to my Blog. This is my personal blog where i post my own questions and answers , articles about ASP.Net., SQL Server, HTML, CSS, Jquery and many more..

Visit Profile

Leave a comment

Name
E-mail
Url
Message

Get More Stuff
Subscribing to the TheOneblogs newsletter and get intersting stuff and updates to your email inbox.
Your Email

 

Style Switcher

Change Color

×! We use cookies to improve your user experience. More information