纯CSS怎么实现radio和checkbox效果

这篇文章将为大家详细讲解有关纯CSS怎么实现radio和checkbox效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

radio-and-checkbox

纯CSS实现radio和checkbox效果

reset-radio

在开发PC端的项目时，经常会用到radio和checkbox组件，可是因为原生的样式相对来说不符合设计师的设计风格，所以我们可能会经常引用第三方的模块去实现，或者通过js等其他方式去hack。这样相对来说增加了代码量不说，还特别复杂，所以才有了这个纯CSS依赖原生input[radio]和input[checkbox]的实现方式，主要代码如下：

html主要代码

<div class="reset-radio">    <input checked type="radio" id="age1" name="age">    <span class="real-target"></span></div>

CSS代码，这里主要是通过一个子节点span去配合input:checked兄弟选择器，来修改样式

.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%;}

关于“纯CSS怎么实现radio和checkbox效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。