Change the checkbox's original style to write your favorite style

Now in the project, the UI will often design a unique style, where the use of the way is CSS3 pseudo-class way to solve

1. The first method: is to use the background map as the style of checked

Body:::

 

Explanation: Here is the way to use the span package of input and label labels, one thing to note here is that the ID name in input should be the same as the name of the label, otherwise the effect will not come out.

Css:

#container {height:150px;width:150px;}
#container span {position:relative;}
#container. inputcheck {position:absolute;width:20px;height:20px;		
						Visibility:hidden;}
#container. Inputcheck+label {display:inline-block;width:20px;height:20px;
							background:red;}
 
Explanation: The most important thing here is to cancel the checkbox's original style and replace it with a new one.

 
 


 


Visibility:hidden; is to cancel the style. The other CSS code does not do long explanations, the original style of the check box is red, and then the checked style checkbox.png the picture. Photo Show: See 1.png

The second way:

CSS code:


<style>
 span {position:relative;}
 . Inputcheck {Position:absolute;visibility:hidden;}
 . Inputcheck+label {display:inline-block;width:16px;height:16px;border:1px solid #fd8845;}

 . Inputcheck:checked+label:after {content: "";p Osition:absolute;left:3px;bottom:10px;width:9px;height:4px;border: 2px solid black;
	border-top-color:transparent;border-right-color:transparent;
	-webkit-transform:rotate ( -60deg); transform:rotate ( -45deg);} 
</style>
 
In this way I add a content, by positioning the way to adjust, and then by rotating the way to tilt, in a corner of the 2 edges transparent, and the other 2 sides with color, so the effect is out of



Photo Show: 2.png


The Third Way code and method one is the same

CSS in the checked when the code to modify the

Background:url ('/images/common/icon.svg ') no-repeat Center center #ff7a4f;
 

Here I use SVG pictures, and add a color effect on the back out of

Photo Show: 3.png