Custom input [type = & quot; radio & quot;] style, inputradio

Custom input [type = "radio"] style, inputradio

For forms, the input [type = "radio"] style is always unfriendly and may vary in different browsers.

To maximize their differences, and to look good, we first define some styles:

Html: <form action = ""> <div class = "sex"> <div class = "female"> <label for = "female"> female </label> <input type = "radio" name = "sex" id = "female"> </div> <div class = "male"> <label for = "male"> male </label> <input type = "radio" name = "sex" id = "male"> </div> </form>

css:body { margin: 0; }input { padding: 0; margin: 0; border: 0; }.female, .male {    position: relative;    height: 40px;    line-height: 40px;    margin-left: 40px;}.sex label {    display: block;    height: 40px;    width: 40px;    line-height: 40px;    font-size: 20px;    cursor: pointer;}.sex input {    z-index: 3;    position: absolute;    top: 0;    bottom: 0;    left: 40px;    margin: auto;    display: block;    width: 30px;    height: 30px;    cursor: pointer;}

Then observe in various browsers and you will find a big difference:

Ie:

 

Edge:

 

Opera:

 

Chrome:

 

Firefox:

 

For firefox browsers, even if the width and height are set, it still has no effect. The circle of input [type = "radio"] is still in the initial state. The performance of other browsers is also inconsistent. To achieve consistent results, we need to perform compatibility processing.

Ideas:

1. Hide the input [type = "radio"], opacity: 0; on the upper layer. When we click it, We can correctly respond to the original event.

2. Define a circle and place it on the lower layer to simulate similar styles;

3. When Javascript is used to select input [type = "radio"], the custom elements in its lower layer change the original background color.

Code:

Html: <form action = ""> <div class = "sex"> <div class = "female"> <label for = "female"> female </label> <input type = "radio" name = "sex" id = "female"> <span class = "female-custom"> </span> <! -- Use the following span as a custom element --> </div> <div class = "male"> <label for = "male"> male </label> <input type = "radio" name = "sex" id = "male"> <span class = "male-custom"> </span> </div>/ form>

Css: body {margin: 0;} input {padding: 0; margin: 0; border: 0 ;}. female ,. male {position: relative;/* is set to relative positioning, so that the sub-element can be absolutely located */height: 40px; line-height: 40px; margin-left: 40px ;}. sex label {display: block; height: 40px; width: 40px; line-height: 40px; font-size: 20px; cursor: pointer ;}. sex input {z-index: 3; position: absolute; top: 0; bottom: 0; left: 40px; margin: auto;/* here and above, this element can be placed vertically . (Top: 0; bottom: 0;) */opacity: 0; display: block; width: 30px; height: 30px; cursor: pointer ;}. sex span {position: absolute; top: 0; bottom: 0; left: 40px; margin: auto; display: block; width: 25px; height: 25px; border: 1px solid #000; border-radius: 50%; cursor: pointer ;}. sex span. active {background-color: #000 ;}

js:$("#male").click( function () {    $(this).siblings("span").addClass("active");    $(this).parents("div").siblings("div").children("span").removeClass("active");});$("#female").click( function () {    $(this).siblings("span").addClass("active");    $(this).parents("div").siblings("div").children("span").removeClass("active");});

After this processing, all the results will be the same in the browser:

Extension:

1. for positioning in the code, use position: relative for the parent element; Use position: absolute for the child element; top: 0; right: 0; bottom: 0; left: 0; margin: auto; enables the child element to be centered (horizontal and vertical) with the parent element. If you only need to center vertically, you do not need to add the right: 0; and left: 0; styles.

2. sometimes, when it is not easy to determine the height of a child element, you can set it as follows: parent element position: relative; child element position: absolute; top: 10px; bottom: 10px; margin: auto; in this way, the height of the child element is the height of the parent element minus the value of 20 PX. Similarly, top and bottom support percentages, which improves scalability.

 

Optimization updates:

Requirements:

1. Sometimes we need inline radio styles;

2. The small circle in the selected button does not need to fill the entire outer ring.

Ideas:

1. Float the left of the div selected for each package;

2. Add a circular outer border to the parent element, and set a background slightly smaller than the size of the parent element.

Code:

Html: <form action = ""> <div class = "fruit"> <div class = "apple"> <label for = "apple"> apple </label> <input type = "radio" name = "fruit" id = "apple"> <div class = "user-defined"> <span class = "circle"> </span> </div> </div> <div class = "banana"> <label for = "banana"> banana </label> <input type = "radio" name = "fruit" id =" banana "> <div class =" user-defined "> <span class =" circle "> </span> </div> <div class =" orange"> <label for = "orange"> orange </label> <input type = "radio" name = "fruit" id = "orange"> <div class = "user-defined "> <span class =" circle "> </span> </div> </form>

css:* { box-sizing: border-box; }body { padding: 50px; }input { padding: 0; margin: 0; border: 0; }.fruit:before { content: ""; display: table; }.fruit:after { content: ""; display: table; clear: both; }.fruit > div { position: relative; float: left; margin-right: 50px; width: 80px; height: 40px; line-height: 40px; }.fruit > div:last-child { margin-right: 0; }.fruit label { display: block; width: 50px; height: 40px; line-height: 40px; cursor: pointer; }.fruit input { z-index: 3; display: block; opacity: 0; position: absolute; top: 0; bottom: 0; left: 50px; margin: auto; width: 30px; height: 30px; cursor: pointer; }.fruit .user-defined { z-index: 2; position: absolute; top: 0; bottom: 0; left: 50px; margin: auto; width: 30px; height: 30px; border: 1px solid #000; border-radius: 50%; cursor: pointer; }.fruit .user-defined span.circle  { display: block; width: 24px; height: 24px; margin-top: 2px; margin-left: 2px; background-color: transparent; border-radius: 50%; }.fruit .user-defined span.active  { background-color: #000; }

js:$("input").click(function() {    $(this).siblings("div").children("span").addClass("active");    $(this).parents("div").siblings("div").find("span").removeClass("active");});

The results are as follows: