The style of the check box control for a checkbox in a pure CSS setting

The style of the check box control for a checkbox in a pure CSS setting 

CheckboxCheckboxes are HTML elements 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 put a different style in your site's Checkbox settings and 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 Default checkbox */input[type=checkbox] {Visibility:hidden;}

After we have hidden all the checkbox checkboxes, we need to add an label HTML element, and we all know that for label the corresponding Checkbox check box is selected when you click on the attribute tag. This means that we can label handle our check box through the Click event Checkbox .

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 DIV 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;tra Nsition: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=checkbox]:checked + Lab El {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 div 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;posit Ion:relative;}

There is a black bar in the middle of the pattern, and the slider slides around it, but the DIV element is already in use, so we need to :before create a new element with a pseudo-class.

/** * Create the line for the circle to move across */.checkboxtwo:before {content: ';p osition: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;transitio N: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 the DIV as the slider in the same way, and the code below creates a black rounded stripe, where we can put the slider and the text inside.

/** * Checkbox three */.checkboxthree {width:120px;height:40px;background: #333; margin:20px 60px; border-radius:50px;p Osition: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 for us to implement these functions, so we will :before :after create two elements with two pseudo-classes, placing "on" and "OFF", respectively.

/** * Create The text for the in position */.checkboxthree:before {content: ' on ';p osition:absolute;top:12px;left:13px;h Eight:2px;color: #26ca28; font-size:16px;} /** * Create the label for the off position */.checkboxthree:after {content: ' Off ';p osition: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;-webki T-transition:all. 5s Ease;-moz-transition:all. 5s Ease;-o-transition:all. 5s Ease;-ms-transition:all. 5s Ease;transiti On: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 properties of the CSS border-radius , and set it to 100% to create a positive circle.

/** * Checkbox four */.checkboxfour {width:40px;height:40px;background: #ddd; margin:20px 90px; border-radius:100%;p OSI tion:relative;-webkit-box-shadow:0px 1px 3px Rgba (0,0,0,0.5),-moz-box-shadow:0px 1px 3px rgba (0,0,0,0.5); Box-shadow: 0px 1px 3px Rgba (0,0,0,0.5);}

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;-web Kit-transition:all. 5s Ease;-moz-transition:all. 5s Ease;-o-transition:all. 5s Ease;-ms-transition:all. 5s Ease;transi Tion: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 the div as a slider or an outer circle for the checkbox, but this time we don't need to use the DIV 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;t op:0; Left:0;background: #eee; border:1px solid #ddd;}

Next, we'll create a tick in the box, for which we can :after create a new element using a 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 transform properties to rotate it so that it looks like a tick.

/** * Display The Tick inside the checkbox */.checkboxfive label:after {opacity:0.2;content: ';p osition: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 stat E for the tick */.checkboxfive input[type=checkbox]:checked + label:after {opacity:1;}

This will create a new checkbox style for you.
Watch the demo to see how these checkboxes work.

The style of the check box control for a checkbox in a pure CSS setting