纯CSS实现radio和checkbox实现效果

PrototypeZ 发布于2019-08-02 10:13 / 864人阅读

摘要：纯实现和实现效果在开发端的项目时，经常会用到和组件，可是因为原生的样式相对来说不符合设计师的设计风格，所以我们可能会经常引用第三方的模块去实现，或者通过等其他方式去。

radio-and-checkbox

reset-radio

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

html主要代码

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

演示效果

radio

checkbox

reset-checkbox

reset-checkbox原理是一样的就不在赘述了。

私有云混合云这种效果怎么实现实现放大镜效果 java实现滤镜效果 js实现放大镜效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52201.html

纯css3漂亮的checkbox和radio美化效果插件Pretty.css插件

摘要：插件介绍是一款纯漂亮的和美化效果。可以和多种字体图标结合使用，对原生的和进行美化，还可以制作按钮点击时的动画效果。支持的图标库有安装可以使用，或来安装。插件介绍 pretty.css是一款纯css3漂亮的checkbox和radio美化效果。pretty.css可以和多种字体图标结合使用，对原生的checkbox和radio进行美化，还可以制作按钮点击时的动画效果。 showImg(...

eechen 2019-08-30 15:44 评论0 收藏0
纯CSS实现网站常用的五角星评分和分数展示交互效果

摘要：技术我们使用一些特殊的选择器，然后配合单选框以及复选框自带的一些特性，可以实现元素的显示隐藏效果。当接口返回的分数是分的时候，刚好占据一半的星星，星半，只要计算出百分比就行，只用管数据，用上数据驱动的特点来动态展示样式这个简直不要太容易。最近做的一个项目涉及到评分和展示分数的模块，UI设计师也给了几个切好的图片，实现五角星评分方式很多，本质爱折腾的精神和对性能追求以及便于维护的考虑，...

Towers 2019-08-29 12:20 评论0 收藏0
纯CSS实现网站常用的五角星评分和分数展示交互效果

摘要：技术我们使用一些特殊的选择器，然后配合单选框以及复选框自带的一些特性，可以实现元素的显示隐藏效果。当接口返回的分数是分的时候，刚好占据一半的星星，星半，只要计算出百分比就行，只用管数据，用上数据驱动的特点来动态展示样式这个简直不要太容易。最近做的一个项目涉及到评分和展示分数的模块，UI设计师也给了几个切好的图片，实现五角星评分方式很多，本质爱折腾的精神和对性能追求以及便于维护的考虑，...

wyk1184 2019-08-20 15:31 评论0 收藏0
纯CSS实现网站常用的五角星评分和分数展示交互效果

摘要：技术我们使用一些特殊的选择器，然后配合单选框以及复选框自带的一些特性，可以实现元素的显示隐藏效果。当接口返回的分数是分的时候，刚好占据一半的星星，星半，只要计算出百分比就行，只用管数据，用上数据驱动的特点来动态展示样式这个简直不要太容易。最近做的一个项目涉及到评分和展示分数的模块，UI设计师也给了几个切好的图片，实现五角星评分方式很多，本质爱折腾的精神和对性能追求以及便于维护的考虑，...

Tony_Zby 2019-08-01 16:35 评论0 收藏0
总结：如何修改美化radio、checkbox的默认样式

摘要：现在前端页面效果日益丰富，默认的组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改样式的方法。它使用纯编写，没有任何的文件。现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。原理：大致原理都是使用原生的checkbox或inp...

asce1885 2019-08-02 12:09 评论0 收藏0