Bootstrap check box and radio button Landscaping plugin (recommended) _javascript tips

Website address

You need to introduce font fonts for awesome-bootstrap-checkbox.css, font-awesome.css and font awesome, which you can download on the Web site above.

The style of the Checkboxs

The style of the radio

Radio Style

Once you have introduced the above file, you can also customize the style, the code is as follows:

. checkbox Label::before {content: "";
Display:inline-block;
Position:absolute;
width:20px;
height:20px;
left:0;
Margin-left: -20px;
border:1px solid #cccccc;< The border color when unchecked!----> border-radius:3px;
Background-color: #fff;<!--when not selected color-->-webkit-transition:border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition:border 0.15s ease-in-out, color 0.15s ease-in-out;
Transition:border 0.15s ease-in-out, color 0.15s ease-in-out; }. checkbox Label::after {display:inline-block; position:absolute; width:16px; height:16px; left:0; top:0; margin-l EFT: -19px;<!--can change the position of "√"--> padding-left:3px;<!--can change the location of "√"--> padding-top:1px;<!--can change the position of "√"-- > font-size:13px;< The font size of the middle hook (the larger the font, the larger the check)--> color: #FAD500;<!--The selected--> of the middle tick. CheckBox Input[type= "checkbox"],. CheckBox input[type= "Radio"] {opacity:0; z-index:1; checkbox input[type= "checkbox"]:focus + Label::before,. CheckBox input[type= "Radio"]:focus + label::before {OutlinE:thin dotted;
outline:5px Auto-webkit-focus-ring-color;
Outline-offset: -2px;
Background-color:black;
Border-color:black;
CheckBox input[type= "checkbox"]:checked + label::before,. CheckBox input[type= "Radio"]:checked + Label::before { background-color:black;<!--The selected background color--> border-color:black;<!--The selected border color-->}. CheckBox Input[type= "
CheckBox "]:checked + label::after,. CheckBox input[type=" Radio "]:checked + label::after {font-family:" Fontawesome ";
Content: "\f00c"; CheckBox input[type= "checkbox"]:d isabled + label,. CheckBox input[type= "Radio"]:d isabled + label {opacity:0.65;. ch
Eckbox input[type= "checkbox"]:d isabled + label::before,. CheckBox input[type= "Radio"]:d isabled + label::before {
Background-color: #eeeeee;
cursor:not-allowed; }. checkbox.checkbox-circle Label::before {border-radius:50%; <div> <div class= "checkbox checkbox-circle" > <input id= "radio1" class= "styled" type= "Radio" name= "Radio" > <label for= "radio1" class= "Font-bo"Lder "> Radio1 </label> </div> <div class=" checkbox checkbox-circle "> <input id=" Radio2 "class=" Styled "type=" Radio "name=" Radio "> <label for=" Radio2 "class=" Font-bolder "> Raido2 </label> </div > </div>

The effect of the above code execution

The above is a small set to introduce the Bootstrap check box and radio button Landscaping plug-ins, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!