Use <label> tag modified input [type = "checkbox"] Style

Because <label> There are two characteristics: ① did not show any effect, ② the user clicks on the tab, the browser can automatically shifts the focus to the associated form controls.

<form>
  <input type="checkbox" name="sex" id="male" />
  <label for="male">Male</label>
</form>

, It is good to modify the input style.

Enter text, modify input [type = "checkbox"] style

The default style: Before selected after selection ;

/ * Before specifying * / 
#male + :: label before {      / * Set the dummy tag label elements * / 
    Content : "\ A0" ;       / * non-breaking space * / 
    the display : inline-Block ;     
    width : 20px ; 
    height : 20px ; 
    border : 1px Solid # 999 ; 
} / * when the selected * / 
#male: :: label before the checked + { 
    Content : "\ 2714" ;     / * √ * / 
    text-align = left
: Center ; 
    background-Color : RGB (68, 171 is, 247) ; 
} / * cancel the default block * / 
#male { 
    the display : none ; 
}

After setting the style: selected before the selection ;

This article simply describes the changes input [type = "checkbox"] principles style, other deficiencies please understand