Customizing the style of the input checkbox

Reference address

Http://www.cnblogs.com/CheeseZH/p/4580062.html

In the e-commerce site, in the product page will have a choice of panel, this time the design of what Ghost checkbox, well, they have always been how good-looking how to come.

Try it yourself. No, the checkbox is not the one they want.

And then found the blogger wrote.

I was in accordance with his fifth paragraph, and then he used CSS3 to achieve the hook I will be directly replaced by a picture, there is the original image can be removed, PS in the original I was orange button, and then stored in PNG format.

Use PS to open the PNG again, do two of the default status of the gray check, now change the foreground color, and then copy the layer, and then select the edit under the fill if not fill then you can only copy the layer on it, no longer the company, can not map and step, the latter has time to fill up. PNG makes Hover state easier to have a transparency option on the layers panel click to expand I chose 30%. Then there are three pictures, not to be used to uncheck, Hover,focus and check with the same sheet.

This is a necessary sentence.

***

/**
 * Hide the default checkbox */
Input[type=checkbox] {
visibility:hidden;
}

  <div class= "Checkboxone" >
  <input type= "checkbox" value= "1" id= "Checkboxoneinput" name= ""/>
     < Label for= "Checkboxoneinput" ></label>
  </div>

And here, replace the class name with the class name you want.

May be using ... There is no knowing whether to write or stick to the wrong.
Then recently changed the company, is a new project, not e-commerce

The design also new two radiobox, not a checkbox.




Then directly paste the code, anyway, there are some original path is changed some things.
1:radio HTML: <div class= "Checkboxfour" > <input type= "Radio" value= "2" id= "CHECKBOXFO Urinput "checked=" true "Name=" User_sex "> <label for=" checkboxfourinput "></label&gt                         ; </div>
Css:
2:radio HTML:                <div class= "Recharge_checkbox_box" >   &NB Sp                 <div class= "Recharge_checkbox_box_inner" >     &NBS P                   <div class= "Ck_box" >         &NBS P                   <div class= "Ck_bill ck_normal" >                                 <input type= "Radio" value= "1 Id= "Ck_forbill" checked= "true" Name= "CHARGE_BF" >                   &NBSP ;             <label for= "Ck_forbill" ></label>                             </div>             &NBS P   &NBsp           <span> charge charges </span>                 &N Bsp       </div>                         < Div class= "Ck_box ck_boxfocus" >                         &NB Sp   <div class= "Ck_flow ck_normal" >                                 <input type= "Radio" value= "2" id= "Ck_forflow" name= "CHARGE_BF" >     &NB Sp                         <label   for= "Ck_forflow" >& lt;/label>                           &LT;/DIV&G T                             <span> charge Flow </span .;                         </div>       &NBS P                 <div class= "Tk_clear" ></div>       &NBS P             </div>                 &LT;/DIV&GT ; CSS:. Recharge_checkbox_box. Ck_box  {width: 30%; margin: 0 8; float: left; Padding: 1.2rem 2%; background-color:  #3e99ec; box-shadow: -1px 0 1px  #3e99ec, 0-1px 1px  #3e99ec, 0 1px 1px  #3e99ec, 1px 0 1px  #3e99ec; border-radius: 2rem; }. Recharge_checkbox_box. Ck_boxfocus  {background-color: transparent; box-shadow: -1px 0 1px # 3E99EC, 0-1px 1px  #3e99ec, 0 1px 1px  #3e99ec, 1px 0 1px  #3e99ec; }. Ck_normal  {position: relative; float: left;}. Ck_normal label  {cursor: pointer; Position: absOlute; width: 20px; height: 20px; top: 0; left: 0; background:  #fff; border: 1px solid  #ddd; border-radius: 25px; }. Recharge_checkbox_box. Ck_bill label  {color:  #fff;}. Ck_normal label  {cursor: pointer; Positi on: absolute; width: 20px; height: 20px; top: 0; left: 0; background:  #fff; border: 1px solid  #ddd; border-radius: 25px; }