自学篇之-----纯css做的漂亮的单选框复选框样式
2019独角兽企业重金招聘Python工程师标准>>>
<!DOCTYPE html>
<html>
<head>
<title>checkbook</title>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<style type="text/css">
[id^="checkbox-"] + label {
background-color: #FFF;
padding: 11px 9px;
border-radius: 7px;
display: inline-block;
position: relative;
margin-right: 30px;
background: #F7836D;
width: 88px;
height: 13px;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 10px rgba(245, 146, 146, 0.4);
}
[id^="checkbox-"] + label:before {
content: ' ';
position: absolute;
background: #FFF;
top: 0px;
z-index: 99999;
left: 0px;
width: 24px;
color: #FFF;
height: 35px;
border-radius: 7px;
box-shadow: 0 0 1px rgba(0,0,0,0.6);
}
[id^="checkbox-"] + label:after {
content: '禁止';
position: absolute;
top: 7px;
left: 37px;
font-size: 1.2em;
color: white;
font-weight: bold;
left: 8px;
padding: 5px;
top: 4px;
border-radius: 100px;
}
[id^="checkbox-"]:checked + label {
background: #67A5DF;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 10px rgba(146, 196, 245, 0.4);
}
[id^="checkbox-"]:checked + label:after {
content: '允许';
left: 6px;
}
[id^="checkbox-"]:checked + label:before {
content: ' ';
position: absolute;
z-index: 99999;
left: 82px;
}
[id^="checkbox-"] + label:after {
left: 35px;
}
.radio +label{
position: relative;
display: inline-block;
z-index: 999;
width: 12px;
height: 25px;
padding: 3px 29px;
}
.radio+label:before{
content:"";
color:#fff;
width: 20px;
height: 20px;
background: #777980;
border-radius: 15px;
position: absolute;
top: 4px;
left: 4px;
display:block;
box-shadow: 0px 0px 3px #A19797;
}
.radio:checked+label:before{
content:"";
background: #1caf9a;
}
.radio+label:after{
content: attr(title);
width: 8px;
height: 8px;
display:block;
border: 3px solid #F7F9F9;
position: absolute;
top: 7px;
left: 7px;
border-radius: 7px;
background: #777980;
box-shadow: 0px 0px 3px #F2EBEB;
}
.radio:checked+label:after{
background: #1caf9a;
}
</style>
</head>
<body>
<p>利用复选框做开关</p>
<input type="checkbox" id="checkbox-2" hidden /><label for="checkbox-2"></label>
<div style="margin: 30px;">
<p>问:您是否觉得您是最好的?</p>
<input type="radio" class="radio" name="n" id="check-1" hidden><label for="check-1">是</label>
<input type="radio" class="radio" name="n" id="check-2" hidden><label for="check-2" title="">否</label>
</div>
</body>
</html>
转载于:https://my.oschina.net/tianyuqin/blog/402928
自学篇之-----纯css做的漂亮的单选框复选框样式相关推荐
- 纯css美化单选与复选框
先看一下实现效果 <html><head> <meta charset="gb2312"> <meta charset="utf ...
- [CSS]复选框单选框与文字对齐问题的研究与解决.
前言: 今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文 ...
- html5 漂亮单选按钮样式,10个HTML5美化版复选框和单选框
单选框html 一.CSS3漂亮的自定义Checkbox复选框 9款迷人样式 以前咱们分享过一款很是不错的CSS3自定义checkbox复选框纯CSS3美化Checkbox和Radiobox按钮,外观 ...
- 自学篇之--js 提取复选框和单选框的值 和纯css的3D按钮
2019独角兽企业重金招聘Python工程师标准>>> <html> <head> <meta charset="utf-8" co ...
- 用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
- 用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
- 精致纯CSS打造绿色漂亮导航栏
代码简介: 极精致的纯CSS实现的菜单,兼容性非常好,条例WEB标准,能用性好,用到有修饰图片,请根据代码地址自己下载. 代码内容: <!DOCTYPE html PUBLIC "-/ ...
- 纯CSS设置Checkbox复选框控件的样式
下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要 ...
- 纯css写单选框和复选框的样式和功能
只用纯css写的单选框和复选框的样式和功能该怎么写?看这里,复制下面的代码运行一遍就知道了,快试试吧! 效果截图: <!doctype html> <html lang=" ...
最新文章
- 国行版HomePod售价2799元,本周五发售
- 【mybatis】mybatis中 的# 和 $的区别
- linux c++ 函数 查看,在C++ man pages中查询C++的函数
- java 易变变量_提高java编程质量 - (一)易变业务使用脚本语言编写
- python input函数赋值法_大佬们 我是刚开始学python的小白 遇到这种赋值方式 实在不懂这个a+b是赋值给谁的 求解...
- 2021年,脸皮“厚“点儿
- 第一轮复习完毕,kmp走起
- 阿帕奇骆驼遇见Redis
- itchat 保存好友信息以及生成好友头像图片墙
- “融合、智能、绿色”施耐德电气线上工博以全生命周期解决方案助推数字化
- Fatal error: Maximum function nesting level of '100' reached, aborting!
- 生活随笔: 毕业之前和毕业之后
- 自适应输出表格(ASP版)
- 剑指MBA?Acer发布全高清触控Win8平板Aspire S7
- java写颜色识别_Java+Opencv 颜色识别
- arm应用程序之文件读写操作差异open与fopen
- 重装系统后计算机无法启动,重装系统后电脑为什么启动不了?云骑士告诉你怎么办?...
- Eclipse4.6(neno)配置Tomcat插件
- 了不起的盖茨比读后感---Java程序员学Python学习笔记(二)
- 方格走法-牛客网(排列组合和动态规划)
热门文章
- Python基础语法06--文件
- 【Red Hat 】vim编辑器的常用命令以及使用技巧
- ApplicationIdle
- Bitdefender Internet Security 2013 – 免费3个月
- 2003 resource kit之Robocopy 高效文件复制工具
- Go 语言编程 — Cobra 指令行工具
- OvS v.s. OvS-DPDK v.s. VPP
- 互联网协议 — HTTPS 安全的超文本传输协议
- 5G NGC — 会话管理模型 — 边缘业务本地分流
- Windows 08 R2_NLB负载均衡(图文详解)