使用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+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 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中SQL注入攻击与XSS攻击
2012/06/10 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
Python 正则表达式(转义问题)
2014/12/15 Python
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
python第三方库学习笔记
2020/02/07 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
打架检讨书100字
2014/01/08 职场文书
入股协议书
2014/04/14 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
交通安全教育主题班会
2015/08/12 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL