CSS模拟radio和Checkbox元素

最新推荐文章于 2021-08-12 15:53:04 发布

lpldplws

最新推荐文章于 2021-08-12 15:53:04 发布

阅读量581

点赞数

CC 4.0 BY-SA版权

分类专栏：初期前端遇到的问题

本文链接：https://blog.youkuaiyun.com/lpldplws/article/details/78875814

初期前端遇到的问题专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何仅使用CSS来模拟input[type=checkbox]和input[type=radio]的样式，包括实现点击选择、表单传值以及在非Safari浏览器上支持tab键切换。文章列举了两种方法，每种方法都存在一些小问题，如focus效果带来的outline和box-shadow的处理。作者计划在与胡老师的讨论后对解决方案进行改进。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近胡老师给了我一个任务：在表单中模拟出checkbox样式的input控件，只能用CSS实现。第一眼觉得不难，后来才发现还有不少坑，一共有两种方法实现这种样式，大体都相同，但都有一些缺点，等跟胡老师碰头时在进行商讨：

以checkbox为例：
主要要实现以下两个要求：
1.实现input为checkbox的样式，可以选择点击，也可以通过form表单传值；
2.在除Safari浏览器外，支持tab键切换至下一个控件；

基于这两点，有以下两种方法：
1. 先设置input为checkbox的元素的display:none隐藏起来，在每个input标签后面添加一个label标签，可以在CSS中根据点击label标签达到对与其对应的input标签设置checked属性，可以在有checked属性的input标签后面的label标签后进行修改样式使得样式与checkbox样式一致；在checkbox对应的label标签中，添加tabindex属性使其可以用tab键进行切换。
主要代码如下：
HTML:

 <label>
        <span>Your Education :</span>
        <input class="simulate-checkbox" name="education" id="checkbox-one" type="checkbox">
        <label for="checkbox-one"></label>
        <p>high school</p>
        <input class="simulate-checkbox" name="education" id="checkbox-two" type="checkbox">
        <label for="checkbox-two"></label>
        <p>college</p>
        <input class="simulate-checkbox" name="education" id="checkbox-three" type="checkbox">
        <label for="checkbox-three"></label>
        <p>postgraduate</p>
        <input class="simulate-checkbox" name="education" id="checkbox-four" type="checkbox">
        <label for="checkbox-four"></label>
        <p>PhD</p>
    </label>

CSS样式：

.simulate-checkbox {
    display:none;
}

.simulate-checkbox + label {
    vertical-align: text-bottom;
    margin-top: 8px;
    border: 1px solid #cacece;
    box-shadow: inset 0px 8px 5px -8px rgba(0, 0, 0, 0.2);
    padding: 6px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
}

.simulate-checkbox + label:focus + label {
    box-shadow: 0 0 0 3px #419bf9;
}

.simulate-checkbox + label:active {
    background-color: #cacece;
}

.simulate-checkbox:checked + label {
    background-color: #419bf9;
    background-image: url("img/checked.png");
    background-size: 100% 100%;
    border: 1px solid #419bf9;
    box-shadow: 0 0 0 0;
}

label + p {
    margin-top: -5px;
    display: inline;
}

实现以后发现有以下问题：
当按tab键进行切换控件时，会有focus的效果，tabindex属性会自动对有focus属性的控件添加一个outline的效果，因为对label标签添加了tabindex属性，所以在按tab键切换时会有outline的效果。当点击label标签时，会对与其对应的checkbox控件添加checked属性，但是checked属性会自动对checkbox控件添加focus的特点，也会对label添加outline的属性，和原生的checkbox有些出入。

2.设置input为checkbox类型样opacity为0，并且width设为0，这样input为checkbox的控件在界面上实际上是存在，但是对于用户是隐藏的。然后不对label标签设置tabindex属性，根据checkbox自带的tabindex属性跳转，根据label对应的checkbox获得focus时设置该label的outline属性模拟checkbox的样式，但是在实际过程中，要考虑radio为圆形样式，因为只有Firefox浏览器支持outline-radius标签，所以在此用box-shadow标签模拟圆形的outline。具体代码如下：
HTML：与上一致；
CSS：

.simulate-checkbox {
    opacity: 0;
    width: 0;
    padding: 0;
}

.simulate-checkbox + label {
    vertical-align: text-bottom;
    margin-top: 8px;
    border: 1px solid #cacece;
    box-shadow: inset 0px 8px 5px -8px rgba(0, 0, 0, 0.2);
    padding: 6px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
}

.simulate-checkbox:focus + label {
    box-shadow: 0 0 0 3px #419bf9;
}

.simulate-checkbox + label:active {
    background-color: #cacece;
}

.simulate-checkbox:checked + label {
    background-color: #419bf9;
    background-image: url("img/checked.png");
    background-size: 100% 100%;
    border: 1px solid #419bf9;
    box-shadow: 0 0 0 0;
}

label + p {
    margin-top: -5px;
    display: inline;
}

这里也有一个问题：
当点击对应的label标签后，checkbox元素根据checked来判断是否为label加载box-shadow属性，当点击label后，会有box-shadow属性，但是当再次点击取消后，虽然背景图片去掉了，样式显示为未点击，但是焦点还是再该元素上，还是有box-shadow属性存在。

相比以上两种方法，第二种方法相对更接近原生的checkbox，但还是有问题，下周在与胡老师讨论后，会对本文进行修改。