Gao fushuai usage of input radio and checkbox labels

The native effects of the radio and checkbox tags in the input tag are too ugly.

Fortunately, the WebKit browser can now use

-webkit-appearance:none;

To change your image.

Radio tag

Scenario 1: A dot below many images. The advantage of this is that you only need to set the checked of this element to true if you set a dot in JS, you do not need to write JS scripts when you click them with the mouse.

The simple CSS code is as follows:

.radio{    width: 10px;    height: 10px;    -webkit-appearance: none;    pointer-events: none;    border-radius: 5px;    display: inline-block;    background-color: rgb(205,205,205);    margin: 0 5px;}.radio:checked{    background-color: rgb(134,176,213);}

Checkbox tag

Scenario 1: The toggle button can use an image and set its background-position-x attribute to move left and right.

The simple CSS code is as follows:

.checkbox{    -webkit-appearance:none;    width: 100px;height: 30px;    background-color: #fff;    background-image: url(‘img/checkbox.png‘);    background-repeat: no-repeat;}.checkbox:checked{    background-position-x: 100px;}

Conclusion

Of course, this is only the simplest effect. You can also add various effects, such as mouse strokes, mouse clicks, and animations.