How to change the default checkbox style

when we use a checkbox to the input label in a project, its default style usually does not meet the requirements of the project, mainly because it looks a little ugly. To change it according to the needs of the project is what we want to do, the following two common practice.

1. Use background picture instead of selected effect
The main principle is to hide the original checkbox: Visibility:hidden property But it still occupies position and replaces its position with a picture.
The advantage is good compatibility
Effect Chart:

Code:

--html--
<div id= "Check" >
<span><input type= "checkbox" class= "Input_check" id= "Check1" > <label for= "Check1" ></label></span>
<span><input type= "checkbox" class= "Input_" Check "id=" Check2 "><label for=" Check2 "></label></span>
</div>

--css--
#check {margin:20px auto;}
#check. Input_check {position:absolute;width:20px;height:20px;visibility:hidden;background: #E92333;}
#check span {position:relative;}
#check. Input_check+label {display:inline-block;width:20px;height:20px;background:url (' settled Application Page 3/Entry Application page/images/ Gou.png ') No-repeat;background-position: -31px-3px;border:1px solid skyblue;
#check. Input_check:checked+label {background-position: -7px-4px;}

2. Use CSS3 to implement
Mainly use after, the disadvantage is that there is a compatibility problem.
Effect

--html--
<div id= "CHECK_CSS3" >
<span><input type= "checkbox" class= "Input_check" id= "Check3" ><label for= "Check3" ></label></span>
<span><input type= "checkbox" class= "Input_" Check "id=" Check4 "><label for=" Check4 "></label></span>
</div>

--css--
 #check_css3 {margin:20px auto;}
  #check_css3 span {position:relative;}
   #check_css3. Input_check {Position:absolute;visibility:hidden}
    #check_css3. Input_check+label {display:inline-block;width:16px;height:16px;border:1px solid #ffd900;} 
    #check_css3. input_check:checked+label:after {content: "";p osition:absolute;left:2px;bottom:12px;width:9px;height : 4px; border:2px solid #e92333; border-top-color:transparent;border-right-color:transparent; -ms-transform:rotate ( -60DEG); -moz-transform:rotate ( -60DEG); -webkit-transform:rotate ( -60DEG); Transform:rotate ( -45deg);}

Here are two ways to implement this, if you have a better and quicker way. Tell me please.