Css realizes checkbox and Radio style customization

preface

Checkbox and Radio-style customizations are common on web pages, such as gender selection for form entry and read user agreement selection for user registration. As users have higher requirements for product experience, we will redesign checkbox and Radio. The default style of Checkbox is very ugly, and it is impossible to modify the style of checkbox and Radio directly. Here, we use the label label to beautify the style.

First look at the implementation effect diagram, as follows:

Implementation approach

1. Set the input property hidden to hide the input, or run display: None

<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
Copy the code

2. Bind the input by ID with the label for tag, so that clicking on the label is actually clicking on the input

<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
			    <label for="adviceRadio1" class="advice"></label>
Copy the code

3. Define the style of the label and set the background image of the unselected state

.advice{
					height: 12px;
			        width: 12px;
				    display: inline-block;
				    background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png');
			        background-repeat: no-repeat;
			        background-position: center;
			        vertical-align: middle;
			    	margin-top: -4px;
				}
Copy the code

4. Style the selected state label using the adjacent selector

input[type="radio"]:checked + .advice{
				    background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png');
				}
Copy the code

The implementation code

Please select the question for feedback: <label> <inputtype="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
			    <label for="adviceRadio1" class="advice"></label>
			    <span class="radio-name"> Problem </span> </label> <label> <inputtype="radio" name="type" id="adviceRadio2" value="2" hidden/>
			    <label for="adviceRadio2" class="advice"></label>
			    <span class="radio-name"<span > </label> <span ID ="result">1</span>
		    <style type="text/css">
		    	.advice{
					height: 12px;
			        width: 12px;
				    display: inline-block;
				    background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png');
			        background-repeat: no-repeat;
			        background-position: center;
			        vertical-align: middle;
			    	margin-top: -4px;
				}
				input[type="radio"]:checked + .advice{
				    background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png');
				}
		    </style>
Copy the code

The above is the implementation code of radio checkbox, which is similar to defining input type as checkbox

Get the radio and checkbox selected values

There are 3 ways to get the value of radio using jquery:

$('input:radio:checked'). Val (); $("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
Copy the code

2. Obtain the checkbox value

 var obj = document.getElementsByName("hobby");
		         var check_val = [];
		         for(k in obj){
		         	if(obj[k].checked){ check_val.push(obj[k].value); }}Copy the code

In the pit of

I started writing as a pseudo-element, hiding input and setting input:after to define its style:

//html
<input type="radio" name="sex" id="male" /><label for="male"> Male</label>

//css
input[type=radio]{
            visibility: hidden;
        }
        input[type=radio]:checked::after{
            background-image: url('./img/sprite.png');
            background-repeat: no-repeat;
            background-position: -59px -10px;
            visibility: visible;
        }
        input[type=radio]::after{
            content: ' ';
            display: block;
            height: 20px;
            width: 20px;
            background-image: url('./img/sprite.png');
            background-repeat: no-repeat;
            background-position: -24px -10px;
            visibility: visible;
        }
Copy the code

However, it was later found that this method has compatibility problems and cannot be displayed in Firefox browser. After checking the information, the input does not support pseudo-elements :after,:before. Firefox can’t insert content DOM elements, and the pseudo-elements are rendered inside the container. Input cannot hold other elements, so it does not support pseudo-elements. Input, img, iframe, etc. cannot contain other elements, so you cannot insert content through pseudo-elements. Input is used with other container elements (I, SPAN, etc.) to achieve the desired effect

Check out the demo online

I have uploaded the complete code to github.com/fozero/fron… , you can click to view, if you feel good, remember the star oh!

The relevant data

https://www.cnblogs.com/u-drive/p/7888155.html https://fatesinger.com/74438

Statement: Original article, reproduced please indicate the source, thank you! www.cnblogs.com/fozero/p/89… Tags: Radio, Checkbox beautification