Implementation of radio and checkbox implemented by CSS

This article mainly introduces the pure CSS Implementation Radio and checkbox implementation of the relevant data, the content is very good, and now share to everyone, but also for everyone to do a reference.

Radio-and-checkbox

Pure CSS implements radio and checkbox implementation effects

Reset-radio

Radio and checkbox components are often used when developing PC-side projects, but because native styles are relatively non-conforming to the designer's design style, we may often refer to third-party modules to implement them, or to hack by other means, such as JS. This relatively increases the amount of code not to say, but also particularly complex, so that the pure CSS relies on native Input[radio] and Input[checkbox] implementation, the main code is as follows:

HTML main code

<p class= "Reset-radio" >    <input checked type= "Radio" id= "Age1" name= "age" >    <span class= " Real-target "></span></p>

CSS code, here is mainly through a sub-node span to match the input:checked Brother Selector, to modify the style

. reset-radio {    display:inline-block;    position:relative;    width:16px;    height:16px;}. Reset-radio. real-target {    z-index:1;    width:100%;    height:100%;    Position:absolute;    Display:inline-block;    Background: #ffffff;    border:1px solid #dadde0;    border-radius:100%;    top:0;    left:0;    bottom:0;}. Reset-radio Input[type=radio] {    cursor:pointer;    Z-index:2;    width:16px;    height:16px;    opacity:0;    Position:absolute;    left:0;    top:0;    margin:0;    right:0;    bottom:0;}. Reset-radio Input:checked+span {    border-color: #48b4ec;}. Reset-radio Input:checked+span::before {    content: ';    Position:absolute;    Background: #48b4ec;    width:6px;    height:6px;    top:50%;    left:50%;    Transform:translate ( -50%, -50%);    border-radius:100%;}

Reset-checkbox

Reset-checkbox principle is the same is not to repeat it.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!