CSS 美化checkbox

HTML代码

爱好：<label for="travel"><input type="checkbox" name="like" value="travel" id="travel"><span class="checkbtn"></span><span>旅游</span></label><label for="sports"><input type="checkbox" name="like" value="sports" id="sports"><span class="checkbtn"></span><span>运动</span></label> -->

核心是隐藏原有的按钮样式，重新构造选中和未选中状态的样式

CSS代码

         input[type="checkbox"] {display: none;}.checkbtn {display: inline-block;width: 14px;height: 14px;border: 1px solid #dcdfe6;border-radius: 3px;position: relative;}input[type="checkbox"]:checked+span {background-color: #409eff;border-color: #409eff;}.checkbtn::after {content: '';border: 2px solid #fff;border-left: 0;border-top: 0;width: 5px;height: 10px;position: absolute;top: -2px;left: 3px;transform: rotate(45deg) scaleY(0);/* transform-origin: center; *//* 过渡的属性    过渡的时长   曲线      延迟时间 */transition: transform 0.15s ease-in 0.05s;}input[type="checkbox"]:checked+span::after {transform: rotate(45deg) scaleY(1);}

CSS 美化checkbox相关推荐

CSS3和jQuery实现的自定义美化Checkbox和Radiobox
现在经常可以在网络上看到一些非常奇特的表单元素,例如Checkbox复选框和Radiobox单选框,浏览器默认的样式确实是太丑了,而且更让人蛋疼的是各个浏览器的样式还不统一,考虑到现在越来越多的用户使 ...
Form 表单详解：案例、CSS 美化
本文要点: 常见表单表单的性质表单CSS美化使用 radio 实现 Tab 选项卡什么是表单用户通过表单填写信息,然后通过计算机网络传送给服务器.表单标签不是一个标签,而是一组标签,因为不同 ...
html5搜索框美化,CSS美化的漂亮搜索框
CSS美化的漂亮搜索框我要搜索搜索 var $ = function(id){return document.getElementById(id);} var formSubmit = funct ...
10使用CSS美化页面
技术交流QQ群:1027579432,欢迎你的加入! 本教程来源于B站杨仕航Django2.0开发视频教程,如需转载,必须注明来源! 1.页面设计 2.导航栏设计打开blog文件夹的urls.py文 ...
在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法 CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距 ...
用CSS美化你的滚动条
本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性,最后,还将介绍如何用 ...
在线CSS美化格式化工具
在线CSS美化格式化工具在线CSS美化格式化工具美化格式化CSS:压缩缩小CSS 代码以美化.格式化.美化,使你的 CSS 更易于阅读.语法高亮.自动完成功能也可以更轻松地编写代码. 美化格式化C ...
移动端屏幕适配和css美化浏览器自带的滚动条
一.css美化浏览器自带的滚动条: 浏览器自带的滚动条显示不太美观,我们可以调css样式来美化一下.了解以下浏览器(webkit内核)滚动条自带伪类样式: ::-webkit-scrollbar:针对 ...
html表格边框美化,CSS美化表格边框汇总与效果
用css美化表格边框1 2 3 4 5 6 7 8 9 ...
css美化radio
需求使用css 美化 input type="radio" 如图: 代码 <input class="radio-beauty" type=" ...

CSS 美化checkbox

CSS 美化checkbox相关推荐

最新文章

热门文章