HTML radio buttons Custom styles

Objective:

One day, wrote an interface with a radio button, suddenly think of other web sites on the Internet a variety of radio buttons, and then want to "change this circle circle how?" , so in looking for the style of the radio button, no one said to modify the circle, so went online to find again, a variety of their own choice of one and a little modification, feel simple and easy to understand, and the most important is the effect is good, so here and you share.

　　Principle:
As already mentioned, the HTML radio button does not provide a style to modify its circle, so it is impossible to rely on a statement like "Color: #fff", but consider:
(a) HTML each input can be added a label, click on the label, will also go to input click:

　　IsWhether
(B) Label tags can be added to the background, and through other styles, let the background appear on the left side of the text:

　　IsWhether
(C) The input tag can be hidden:

　　IsWhether
(D) after clicking on the label, the background image can be modified by JS:

(Picture here)

See here there is no epiphany, what custom radio button icon, but to hide the radio button, and then through each click to modify the label's background image , to achieve a custom effect, and later need to be the icon of the radio button for the flower cat dog, but also just change the film. If this is not possible, we will proceed to the following:

　　Realize:

The principle of four points, can also be seen as the implementation of the custom radio button four parts:

A: There's nothing to say, it's a label.

<label for= "Sex-man"class= "Radio_label checked">    <inputtype= "Radio"value= "1"checked= "Checked"ID= "Sex-man"name= "Sex" />male</label>

B:

Set Background:	background: URL (http://images.cnblogs.com/cnblogs_com/fly-show/907124/o_radio_bk.png) no-repeat;
Set the background size:	background-size:px +px; (Here my background is two icons up and down together, so the height is twice times the background)
Set display mode:	display: inline-block; (set label to inline block element, so that it can have a wide height and not wrap)
Set height and row heights:	height: px; line-height: px;
Set text on the right:	text-indent:px;

C: Hide radio button: display:none;

D: I use jquery for this step, mainly for convenience. First, a selected CSS class is defined, and a method is added to all radio button clicks: Find the label of all the radio buttons with the same name, remove their selected style, and add a selected style to the selection.

Selected style:

. Checked {    background-position0  -20px;}

Here I use the background-position, offset the background map upward 20px, so that the selected picture display.

To add a click processing method:

$ (function() {
Give all the radio buttons a click to add Processing    $ ("input[type= ' Radio ')"). Click (function() {
Find the label that corresponds to the current name of the radio button and remove the class of the selected style
$ ("input[type= ' Radio '][name= '" +$ (this). attr (' name ') + "']"). Parent (). Removeclass ("checked");
Give yourself the corresponding label
$ (this). Parent (). addclass ("checked");    }) ;

Attached: Source Code

　　At last:

You can also try this if you want to modify other tags, or add a style to another label (such as a multi box).

HTML radio buttons Custom styles