CSS implementation of radio and checkbox implementation effects

不言
Release: 2018-06-25 11:24:26
Original
1260 people have browsed it

这篇文章主要介绍了纯CSS实现radio和checkbox实现效果示例的相关资料,内容挺不错的,现在分享给大家,也给大家做个参考。

radio-and-checkbox

纯CSS实现radio和checkbox实现效果

reset-radio

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

html主要代码

Copy after login

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%; }
Copy after login

reset-checkbox

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

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

关于css属性的选择对动画性能的影响

IE下模拟css3中box-shadow的效果

div仿checkbox表单样式的美化和功能

The above is the detailed content of CSS implementation of radio and checkbox implementation effects. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!