关于单选框以及复选框的css美化方法

FungLeo

发布于 2022-11-28 08:47:38

6360

发布于 2022-11-28 08:47:38

文章被收录于专栏：地方网络工作室的专栏地方网络工作室的专栏

在工作中，遇到单选框和复选框还是一件很头疼的事情。丑就算了，关键是各个浏览器都不一样，这非常让我头疼。

以前一直用JQUERY来解决这个问题。不过js解决复选框没有问题，解决单选框就有点拙荆见肘，需要写很长的代码，以至于我现在都忘记了该怎么写了。

今天在网上看到了有人用纯css的方式来解决这个问题，突然感觉拨云见月啊。经过我自己的学习整理，总结如下：

html结构：

<label class="FengCheck"><input name="radio" type="radio"><span></span></label>
<label class="FengCheck"><input name="check" type="checkbox"><span></span></label>

这里给label加了一个样式名。主要是为了方便。而我非常喜欢把label包裹input和样式元素，这样避免了写一个for和id。

less 写法

.FengCheck {
    input {display: none;}
    input + span {display: inline-block;width: 50px;height: 50px;background: #999;cursor: pointer;}
    input[type="radio"] + span {border-radius: 50%;}
    input[type="checkbox"] + span {border-radius: 10%;}
    input[type="checkbox"]:checked + span {background: #f60;}
    input[type="radio"]:checked + span {background: #f60;}
}

当然，这个是用作演示的。实际工作中，肯定要用更加漂亮的图片去替代。那个是基本功，就不赘述了。

这种方式还真心是简单。效率也是杠杠的。

当然，这种需要用户点击的设计，一定要加上禁止选择样式，否则点来点去就反蓝了哦。

PS：这种方式是不兼容低版本IE的。不过，我是坚决不会再去做低版本IE的适配了。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2015-08-25，如有侵权请联系 cloudcommunity@tencent.com 删除

css