使用css自定义input单选框样式
分类专栏: Css&
简介 开发中,有时候需要改变圆角的单选框, 可能就需要去掉默认的单选框样式,使用自定义的样式。
<p><strong class="ql-size-large">html代码</strong></p><pre class="ql-syntax" spellcheck="false"> <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>
</pre><p><br></p><p><br></p><p><span class="ql-size-large">CSS代码</span></p><pre class="ql-syntax" spellcheck="false">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);
}
</pre><p><br></p><p><br></p>
分享到:
转载:
喜欢 1
收藏
上一篇:
css的相关样式(简单特效)
暂无评论信息
- 相关文章
- 文章推荐
-
jQuery 3.0正式发布
jQuery 基金会刚刚发布了该 Java 框架的 3.0 版本,并且首次抛弃了对老旧的 IE 浏览器的支持。jQuery 3.0 的工作始于 2014 年 10 月,其最初目标是在 2.0 版本之上进行完善,并和遥远的 1.0 版代码说再见——因为要兼容 IE 的缘故,其已经臃肿不堪。jQuery 2.0 已经与 1.0 版本完全不兼容,而 3.0 也将继续这一路线。
-
半导体短缺即将结束?分析师:如果没有 1 美元芯片会影响更多
德勤咨询(Deloitte Consulting)的芯片分析师认为,随着芯片行业资本支出的增加,需求度较高的工厂已经开工,预示着短缺情况即将结束。
-
Docker 常用命令
docker目前代替虚拟机使用的一个容器,灵活好用。
-
眼镜试戴的装饰效果
开发眼镜类产品的时候需要使用试戴的功能,这里就有你需要的学习资料哦!
- 点击排行
- 站长推荐
- 猜你喜欢
- centos安装python37
- css的相关样式(简单特效)
- sqlalchemy.exc.ArgumentError: Could not parse rfc1738 URL from string
- Facebook在美测试NFT支持功能
- js 在本地调用电脑的摄像头
- CentOs7操作防火墙相关命令
- mysql 随机查询数据
- 程序员如何摆脱35岁困境?SoFlu软件机器人助你成为全栈工程师
- js 怎么获取当前这周的日历
- The Cybersecurity Wave: Importance and Impact of Cybersecurity in Today’s Digital World
- 网站信息
- 站内问答:12篇
- 站内文章:207篇
- 建站时间:已运行917天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据