» » Use CSS3 to beautify checkbox


Use CSS3 to beautify checkbox

Author: bamboo06 on 4-05-2015, 03:32, views: 1677

We know HTML default check box style is very simple, and treated to pictures instead of the check box will beautify the way of trouble page form, then this article will take you to understand with examples about the use of CSS3 will be checkbox checkbox style landscaping, and bring cool sliding effect.

Usually we use the following html structure, we give the check box to define id # checkbox_a1, and then use the label for property associated with it, so, when the user clicks on the label, in fact, equivalent to clicking the # checkbox_a1.
<input type="checkbox" id="checkbox_a1" class="chk_1" /> 
<label for="checkbox_a1">check</label> 

By label and checkbox, we can hide the checkbox, and the label production for a variety of beautiful cool checkbox style. We can use: before and: after pseudo-elements to create the effect of a variety of effects, such as a sliding button. These effects are available through the adjacent sibling selector to select the checkbox adjacent label to achieve, Here is a simple example:
.chk_1 { 
    display: none; 
.chk_1 + label { 
    background-color: #FFF; 
    border: 1px solid #C1CACA; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); 
    padding: 9px; 
    border-radius: 5px; 
    display: inline-block; 
    position: relative; 
    margin-right: 30px; 
.chk_1 + label:active { 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); 
.chk_1:checked + label { 
    background-color: #ECF2F7; 
    border: 1px solid #92A1AC; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1); 
    color: #243441; 
.chk_1:checked + label:after { 
    content: '\2714'; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    color: #758794; 
    width: 100%; 
    text-align: center; 
    font-size: 1.4em; 
    padding: 1px 0 0 0; 
    vertical-align: text-top; 

Browse the results page, click on the label when the check box check mark appears to indicate the selected state, click again, the check mark disappears, indicating unchecked.
DEMO, we provided four examples, basically meet the needs of the page common checkboxes style, there is a need can download the source code, you can copy the css styles. You can also make appropriate changes to css styles based on project needs.

Additional information
Beautifying effect check box can support in IE9 + browser, then ie8 and below the browser needs to restore the default style, use the following code:
<!--[if lte IE 8]> 
<link href="ie8.css" rel="stylesheet" /> 

Tags: css, css3, checkbox

Category: CSS

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
  • 0 Articles
22 November 2017 18:42

Matilda Dry

  • Group: Guests
  • –†Registered date: --
  • Status:
Through the help of this site you can download anything you want and help you to make it feel special. In any case college paper writing company will help you to promote better ideas among everyone.

  • 0 Articles
24 January 2018 00:40


  • Group: Guests
  • –†Registered date: --
  • Status:
In this blog I have find so many useful blog post for displaying plugins for wordpress website. That info is given to get more valuable top fineart-portrait.com and reviews. Everything is given for making more valuable resources to all of them.

  • 0 Articles
1 February 2018 18:35


  • Group: Guests
  • –†Registered date: --
  • Status:
I am a student of computer science and I like to spend time in reading stuff related to it. This post is very informative for me which is about Use CSS3 to beautify checkbox. This website contains a lot of informative stuff for students like me and I will must recommend others to visit here.
Buy heavy duty gym mats online from here

Comment on the news site is possible only within (days) days from the date of publication.