Customize the style of the green check box button with CSS

This article mainly introduces the CSS custom green check box button style, has a certain reference value, now share to everyone, the need for friends can refer to

HTML comes with a simple check box or a single-box button style. And sometimes these forms control, you may need to match your own theme styles. Need to beautify them. It may be necessary to use the JS implementation before. Now CSS can also fully achieve the effect we want.

:

We went straight to the subject. The first thing that comes to mind is that the check box requires a background color, and then it's a check box with the selected state. Checked status we use "tick" to indicate this. The HTML can simply represent the

<p class= "I-check" >       <input type= "checkbox" value= "0"/>       <label></label></p>

. I-check as a whole check box. Added CSS code is also simple

. i-check {       width:20px;       height:20px;       position:relative;       margin:20px Auto;   }

The size of the check box depends on your needs. The margin is set here for display in the middle of the browser.
Then the default state of the Set check box, which is set with the label, is the same height and width as the. I-check setting, then gives it a background color and sets his position.

. I-check label {      width:20px;      height:20px;      Cursor:pointer;      Position:absolute;      top:0;      left:0;      Background: #1A9909;      border-radius:4px;

The default state we've done. We continue to analyze, that is what is needed is a selected state, the selected state has just been said with a tick, here we use pseudo-class after to set, set its border, and rotate this after, it becomes a tick. But the default state tick is hidden, so we used a opacity of 0.

. I-check  Label:after {       content: ';       width:9px;       height:5px;       Position:absolute;       top:4px;       left:4px;       border:3px solid #fff;       Border-top:none;       Border-right:none;       background:transparent;       opacity:0;       Transform:rotate ( -45deg);   }

OK, the whole state is set up. Now you need to show the tick when you click the check box. The following code can be done

. I-check input[type=checkbox]:checked + label:after {       opacity:1;   }

Write here, do not forget, let the input check box to set its style, in order to allow users to click, his high width is the same size as the whole, so that it is the top level of the entire box. This allows the user to be able to click anywhere in the area. OK, the last step is to make this input check box hidden, hide, not let him really hide remove, so that, there is no click effect. What you need to hide here is to use opacity to set it to 0.

. I-check Input[type=checkbox] {       opacity:0;       Position:absolute;       Z-index:2;       left:0;       top:0;       width:100%;       height:100%;       margin:0;   }

Well, the whole effect is done, and similarly this can be set to the effect of the radio box.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!