CSS input checkbox and radio style beautification

CSS input checkbox and radio-style landscaping September 1, 2014 132,495 views

In a previous article, I have described the beautification of the input File upload button, address: HTTP://WWW.HAOROOMS.COM/POST/CSS_INPUT_UPLOADMH, today, Let's talk about the checkbox beautification and radio beautification, about the Select drop-down box beautification, you want to use a jquery plugin, this plugin after we say! Emergency students can leave a message! But like a checkbox landscaping and radio Landscaping, input landscaping, there is no plug-in. The idea is the same, first put the previous button transparency opacity set to 0, and then, the outer layer with div wrapped, the implementation of the beautification function.

As follows:

The HTML code is as follows:

<span class="pay_list_c1 on"><input type="radio" checked="checked" name="paylist" value="1" class="radioclass"></span>

CSS code:

.Pay_list_c1{Width: 24px;Height: 18px;Float:Left;Padding-Top: 3px;Cursor:Pointer;Text-Align:Center;Margin-Right: 10px;Background-Image:Url(Images/Inputradio.Gif);Background-Repeat: No-Repeat;Background-Position: -24px 0;}.Radioclass{Opacity: 0;Cursor:Pointer-ms-filter :  "Progid:DXImageTransform.Microsoft.Alpha (opacity=0)" Span class= "pun" >; filter: Alpha (opacity =0); }.{background-position : 0 0 }             /span>                

Image download:

The checkbox method is the same:

Html

<div Class="Piaochecked On_check"> <input name= "NEED_INV"  type= "checkbox" Span class= "PLN" > style= "height :20px; Width:20px; "  class= "Radioclass input"  value= "1" > </DIV>           

Css:

.Piaochecked{Width: 20px;Height: 20px;Float:Left;Cursor:Pointer;Margin-Left: 10px;Text-Align:Center;Background-Image:Url(Images/Checkbox_01.Gif);Background-Repeat: No-Repeat;Background-Position: 0 0;}.On_check{Background-Position: 0 -21px;}. Radioclass {opacity: 0 cursor: Pointer;-ms-filter:   "Progid:DXImageTransform.Microsoft.Alpha (opacity=0)" ;< Span class= "PLN" >filter: Alpha (opacity< Span class= "pun" >=0               /span>                

JS Click Switch effect is very simple, I do not write here, the key is the idea, I hope you have help!

JS Click to toggle Effect I write here briefly:

About Radio:

Because Radio is selected, the next one will lose the selection effect, within a group, the name is set to the same, we basically just change the CSS class is available.

If within a group, all radio's parent span has the PAY_LIST_C1 written above, then JS can write that.

$(".pay_list_c1").on("click",function(){ $(this).addClass("on").siblings().removeClass("on");})

About the checkbox:

Because it is possible to choose more, it is possible to do toggle to its class because the new jquery version has abandoned the toggle event, preserving only the toggle method. All we have to do is write toggle by ourselves as follows:

Note: The selected state of the default input checkbox is consistent with the class of the outside parent Div.

$(". piaochecked").On("Click",function () { $ (this). hasclass (this ( "On_check" $ this//or so write  //$ (this). Toggleclass ("On_check");               /span>                

CSS input checkbox and radio style beautification