This pure CSS3 method of beautifying radio buttons works well in the following situations:
1. It can be compatible with IE9 and above, and if it needs to be compatible with IE8, write IE's hack to remove the style
2. Only radio button radio is supported, because the circle of the radio button selection style can be made with CSS, but the check button checkbox checkbox requires a picture or icon font library
3. No JS is required to support switching effects
The image below is the final rendering:
HTML code:
CSS code:
The most important thing in this method is to select the class name of the effect: .radio input:checked + span.radio-on
+ is a pseudoclass of CSS2, which means that div+p selects <div> all elements immediately after the element <p> .
That is, find the selected input (:checked), and then use the span element named radio-on to do the selected circle effect.
There are many beautification methods on the Internet to make the label into a circle, but in this case, the single selection text must be placed outside the label, which leads to the fact that when clicking on the text, the single selection effect cannot be switched.
So I added a span named radio-bg to the label to make the large circle at the back, and then used a span named radio-on to make the small circle in the front of the selection.
In this way, the text in the label is preserved, and the effect of single selection can also be toggled.
Attached: jQuery takes the value method of the selected radio
var val=$('input:radio[name="sex"]:checked').val();
Attach all three methods:
$('input:radio:checked').val()；
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
|
Posted on 5/16/2019 11:10:41 AM
|
|
|
|
