check box style code sharing for the latest CSS checkbox

This article mainly introduces some CSS checkbox check box style code share, for some simple page control design, need friends can refer to the next

The checkbox check box is an HTML element that may be used by every Web site, but most people don't style them, so on most sites they look the same. Why not set a checkbox in your site to a different style, or even make it look like a check box.

In this tutorial, we will create 5 different selection boxes that you can use on your website.

To see the demo, you can see the check box style we're going to create.
Demo Address

First, you need to add a section of CSS to hide all checkbox checkboxes, and we'll change the look. To do this, you need to add a piece of code to your CSS file.

/**   * Hide the default checkbox */  Input[type=checkbox] {    visibility:hidden;   }

After hiding all of the checkbox checkboxes, we need to add a label HTML element, and we all know that when clicked on a label label with the For property, the checkbox for the checkbox is selected. This means that we can use the label's click event to process our checkbox check box.

Style One

This check box style is like an unlock slider, and the sliders are checked and unchecked to show different positions. When you click the Slider button (label label), the check box is selected, and then the slider moves to the on position.

We start creating the HTML for the check box area.

<section>    <!--checbox One--    
Because this style check box, a label is not enough to complete the task, we use a P element to include a checkbox, we need to use them for black bands and fillets.

/**   * Create the slider bar */  . checkboxone {    width:40px;    height:10px;    Background: #555;    margin:20px 80px;    position:relative;    border-radius:3px;   }
Now we can put the label as a slider on the stripe, we want the button effect to move from one side of the strip to the other, and we can add a label transition.

/**   * Create the slider from the label   */  . Checkboxone label {    display:block;    width:16px;    height:16px;    border-radius:50%;    -webkit-transition:all. 5s ease;    -moz-transition:all. 5s ease;    -o-transition:all. 5s ease;    -ms-transition:all. 5s ease;    Transition:all. 5s ease;    Cursor:pointer;    Position:absolute;    Top: -3px;    Left: -3px;    Background: #ccc;   }
Now that the slider is in the selected (closed) position, when we select the check box, we want a reaction to occur, so we can move the slider to the other end. We need to know that the Judge check box is selected and if so, the left property of the label element is changed.

/**   * Move the slider in the correct position if the checkbox is clicked   */  . Checkboxone INPUT[TYPE=CHECKBO x]:checked + Label {    left:27px;   }
This is the CSS for the first checkbox you need.

Style Two

This check box is styled like a style, but unlike this, the slider button changes color. When you click the slider button, it moves to the other side of the strip and changes the color of the button.

The HTML code and style one are exactly the same.

<section>    <!--checbox and    
This p becomes a bit larger than the style, and the label remains as a slider, using the CSS below to define it.

/**   * Checkbox, * *  . checkboxtwo {    width:120px;    height:40px;    Background: #333;    margin:20px 60px;    border-radius:50px;    position:relative;   }
There is a black bar in the middle of the pattern, and the slider slides around it, but the P element is already in use, so we need to create a new element with: before Pseudo-class.

/** * Create the line for the   circle to move across   *  /. Checkboxtwo:before {    content: ';    Position:absolute;    top:19px;    left:14px;    height:2px;    width:90px;    Background: #111;   }
As with style one, next we write a CSS style for the label and use it as a slider.

/**   * Create the circle to click   */  . Checkboxtwo label {    display:block;    width:22px;    height:22px;    border-radius:50%;    -webkit-transition:all. 5s ease;    -moz-transition:all. 5s ease;    -o-transition:all. 5s ease;    -ms-transition:all. 5s ease;    Transition:all. 5s ease;    Cursor:pointer;    Position:absolute;    top:9px;    z-index:1;    left:12px;    Background: #ddd;   }
I want to implement the same selection as the style, change the left and background properties of the label when it is selected.

/**   * Create The Click event for the checkbox   */  . Checkboxtwo input[type=checkbox]:checked + Label {    left : 84px;    Background: #26ca28;   }
Style Three

The check box style is more complex than the style two, it slides right and left as in the previous example, and when you change the selected and unchecked states, the slider slides to the other side and displays the corresponding text in the original position.

First, we write the HTML code, which is the same as before.

<section>    <!--checbox three--    
Then we use P as the slider in the same way, and the following code creates a strip of black fillet, and we can put the slider and the text inside.

/**   * Checkbox three */  . checkboxthree {    width:120px;    height:40px;    Background: #333;    margin:20px 60px;    border-radius:50px;    position:relative;   }
When the slider is unchecked, the slider is on the left and "OFF" appears on the right, and when clicked, the slider moves to the right and "on" appears on the left.
But the number of elements is not enough to allow us to implement these functions, so we will use: Before and: After two pseudo-classes to create two elements, respectively, put "on" and "OFF".

/**   * Create The text for the on position   *  /. Checkboxthree:before {    content: ' On ';    Position:absolute;    top:12px;    left:13px;    height:2px;    Color: #26ca28;    font-size:16px;   }   /**   * Create the label for the off position   *  /. Checkboxthree:after {    content: ' Off ';    Position:absolute;    top:12px;    left:84px;    height:2px;    Color: #ddd;    font-size:16px;   }
As before, let's add the slider style, which moves to the other side when clicked, and changes the color.

/**   * Create the pill to click   */  . Checkboxthree label {    display:block;    width:52px;    height:22px;    border-radius:50px;    -webkit-transition:all. 5s ease;    -moz-transition:all. 5s ease;    -o-transition:all. 5s ease;    -ms-transition:all. 5s ease;    Transition:all. 5s ease;    Cursor:pointer;    Position:absolute;    top:9px;    z-index:1;    left:12px;    Background: #ddd;   }   /**   * Create the checkbox event for the label   */  . Checkboxthree input[type=checkbox]:checked + Label {
  left:60px;    Background: #26ca28;   }
Style Four

In this style, we create two circles that change the color of the circle inside when clicked to indicate the selected and unchecked state.
The same HTML code as before.

<section>    <!--checbox four---    
Next we create the outer circle for the checkbox, use the CSS's Border-radius property, and set it to 100% to create a positive circle.

<section>     <!--checbox four---     
We then use the LABEL element to create a smaller circle, which changes color according to the checkbox state.

/**   * Create the checkbox button */  . Checkboxfour label {    display:block;    width:30px;    height:30px;    border-radius:100px;    -webkit-transition:all. 5s ease;    -moz-transition:all. 5s ease;    -o-transition:all. 5s ease;    -ms-transition:all. 5s ease;    Transition:all. 5s ease;    Cursor:pointer;    Position:absolute;    top:5px;    left:5px;    z-index:1;    Background: #333;    -webkit-box-shadow:inset 0px 1px 3px rgba (0,0,0,0.5);    -moz-box-shadow:inset 0px 1px 3px rgba (0,0,0,0.5);    Box-shadow:inset 0px 1px 3px rgba (0,0,0,0.5);   }
When the check box is selected, we want to change the background color of the inner circle to indicate the selected state.

/**   * Create the checked state   *  /. Checkboxfour input[type=checkbox]:checked + Label {    background: #26ca28;   }
Style Five

This check box has a different style, it looks just a little bit better than the default checkbox style of the browser, but the difference is that we can define its style according to our own needs.
First, it's the same HTML code.

<section>    <!--checbox Five--    
In the previous example, we used p as the slider band or the outer circle of the checkbox, but this time we don't need to use the P element to set the area of the check box.

/**   * Checkbox Five */  . checkboxfive {    width:25px;    margin:20px 100px;    position:relative;   }
The label label is used for the Click event and the box style for the check boxes we want to define.

/**   * Create the box for the checkbox   */  . checkboxfive label {    cursor:pointer;    Position:absolute;    width:25px;    height:25px;    top:0;      left:0;    Background: #eee;    border:1px solid #ddd;   }
Next, we'll create a tick in the box, for which we can create a new element using the after pseudo-class, and to implement this style, we can create a 5px x 9px rectangle and give him a border. When we remove the top and right border, it will look like a letter L. Then we can use the CSS's Transform property to rotate it so that it looks like a tick.

/**   * Display The Tick inside the checkbox   */  . checkboxfive label:after {    opacity:0.2;    Content: ";    Position:absolute;    width:9px;    height:5px;    background:transparent;    top:6px;    left:7px;    border:3px solid #333;    Border-top:none;    Border-right:none;    -webkit-transform:rotate ( -45deg);    -moz-transform:rotate ( -45deg);    -o-transform:rotate ( -45deg);    -ms-transform:rotate ( -45deg);    Transform:rotate ( -45deg);   }
In the above CSS, we have set its transparency to 0.2, so you will see a check box with a translucent checkmark. You can deepen a little while hovering, and when selected, you can set it to opaque.

/**   * Create The hover event of the tick   */  . checkboxfive label:hover::after {    opacity:0.5;   }   /**   * Create the checkbox state for the Tick   */  . checkboxfive input[type=checkbox]:checked + label:after {
  opacity:1;   }