使用CSS3实现input多选框自定义样式的方法示例


Posted in HTML / CSS onJuly 19, 2019

原理:首先把input元素隐藏掉,然后用CSS设置label元素(其他元素也可以)的样式,选中时的样式使用input:check+label选中label,无须使用图片和JS

效果预览

使用CSS3实现input多选框自定义样式的方法示例

html代码

<div class="radio">
    <input type="checkbox" id="sex1">
    <label for="sex1"></label>
    男
</div>
<div class="radio">
    <input type="checkbox" id="sex2">
    <label for="sex2"></label> 女
</div>

CSS代码

.radio {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.radio input {
    width: 15px;
    height: 15px;
    appearance: none;/*清楚默认样式*/
    -webkit-appearance: none;
    opacity: 0;
    outline: none;
    z-index: 8; /*让input层级高于label,使之能选中*/
    
}

.radio label {
    position: absolute;
    left: 0;
    top: 6px;
    width: 15px;
    height: 15px;
    border: 1px solid #3582E9;
}

.radio input:checked+label::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    /* 这里显示矩形的一半边框再旋转45度来实现对勾样式 */
    width: 5px;
    height: 12px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    transform: rotate(45deg);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 #HTML / CSS
解决margin 外边距合并问题
Jul 03 #HTML / CSS
css3实现蒙版弹幕功能
Jun 18 #HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 #HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 #HTML / CSS
CSS3 分类菜单效果
May 27 #HTML / CSS
css3实现六边形边框的实例代码
May 24 #HTML / CSS
You might like
php判断正常访问和外部访问的示例
2014/02/10 PHP
Symfony控制层深入详解
2016/03/17 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
python django 增删改查操作 数据库Mysql
2017/07/27 Python
python实现人脸识别代码
2017/11/08 Python
python中pip的安装与使用教程
2018/08/10 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
个人授权委托书范本
2014/04/03 职场文书
售后客服工作职责
2014/06/16 职场文书