利用纯CSS美化checkbox和radio和滑动按钮的实现
W3C提供的CheckBox和radio的原始样式非常的丑,而且在不同的额浏览器表现还不一样,使用常规的方法添加样式没法进行修改样式
一, 单选按钮
<html> <head>
<style type="text/css">
.switch {
margin: 20px 20px 0 0;
display: flex;
align-items: center;
width: auto;
}
.checkbox-input {
display: none
}
.checkbox {
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
background-color: #fff;
border: 1px solid #d7d7d7;
border-radius: 3px;
width: 16px;
height: 16px;
vertical-align:middle;
margin: 0 5px;
}
.checkbox-input:checked+.checkbox {
background-color: #57ad68;
}
.checkbox-input:checked+.checkbox:after {
content: "\2714";
display: inline-block;
height: 100%;
width: 100%;
color: #fff;
text-align: center;
line-height: 16px;
font-size: 12px;
box-shadow: 0 0 4px #57ad68;
}
</style>
</head> <body>
<label class="switch">
<input class="checkbox-input" id="checkbox" type="checkbox" name="demo-checkbox1">
<label class="checkbox" for="checkbox"></label>
<span>Hello</span>
</label>
</body> </html>
利用的就是label和CSS3的选中状态checked来修改样式, 中间的那个小✔️是一个unicode编码的字符, 如果需要更改参考http://blog.csdn.net/wy_97/article/details/77749405
二, 复选按钮
<html> <head>
<style type="text/css">
.switch {
display: flex;
align-items: center;
width: auto;
float: left;
}
.radio-beauty-container .radio-beauty {
width: 16px;
height: 16px;
box-sizing: border-box;
display: inline-block;
border: 1px solid #d7d7d7;
margin: 0 5px;
border-radius: 50%;
transition: 0.2s;
}
.radio-beauty-container input[type="radio"]:checked+.radio-beauty {
border: solid 1px green;
padding: 3px;
background-color: green;
background-clip: content-box;
box-shadow: inset 0 0 1px rgba(0,128,0, 0.2), 0 0 3px green;
}
</style>
</head> <body>
<div class="radio-beauty-container">
<label class="switch">
<span class="radio-name">radio2</span>
<input type="radio" name="radioName" id="radioName2" hidden/>
<label for="radioName2" class="radio-beauty"></label>
</label>
<label class="switch">
<span class="radio-name">radio3</span>
<input type="radio" name="radioName" id="radioName3" hidden/>
<label for="radioName3" class="radio-beauty"></label>
</label>
</div>
</body> </html>
和单选按钮的思路一样都是利用选中状态来进行判断
三, 实现滑动按钮
<html> <head>
<style type="text/css">
.switch-slide-label {
display: block;
width: 34px;
height: 18px;
background: #ccc;
border-radius: 30px;
cursor: pointer;
position: relative;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
} .switch-slide-label:after {
content: '';
display: block;
width: 16px;
height: 16px;
border-radius: 100%;
background: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
position: absolute;
left: 1px;
top: 1px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition:0.3s ease;
transition:0.3s ease;
} .switch-slide input:checked+label {
background: #34bf49;
transition: 0.3s ease;
}
.switch-slide input:checked+label:after {
left: 17px;
} </style>
</head> <body>
<div class="radio-beauty-container">
<label class="switch-slide">
<input type="checkbox" id="menu-right" hidden>
<label for="menu-right" class="switch-slide-label"></label>
</label>
</div>
</body> </html>
利用纯CSS美化checkbox和radio和滑动按钮的实现的更多相关文章
- 用纯CSS美化radio和checkbox
Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求. 先看看纯CSS美化过后的radio和checkbox效果:查看. 项目地址:mag ...
- 纯css实现checkbox开关切换按钮
我们都知道 checkbox 标签默认样式 实在是太low了,故对CheckBox美化很有必要. 现提供两种方式对其进行美化. 方法一 <div class="switch-wrap ...
- input美化 checkbox和radio样式
input美化 checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些 ...
- 用纯css改变默认的radio和checkbox的样式
利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...
- 用CSS美化checkbox复选按钮和raido单选按钮-适用于移动端
最终效果: 实现方法 index.html: <!DOCTYPE html> <html> <head> <title></title> & ...
- Css实现checkbox及radio样式自定义
前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...
- css美化checkbox的样式
使用iCheck插件可以改变checkbox.radio的原有样式,但是改变的样式尺寸有些大修改起来也比较麻烦,并且需要使用iCheck的调用方法才能使用,有时候iCheck方法还会覆盖掉同级元素的c ...
- 纯CSS美化的checkbox 和 radio
html <!DOCTYPE HTML> <html> <head> <title>纯CSS3实现自定义美化复选框和单选框</title> ...
- 原创：纯CSS美化单复选框（checkbox、radio）
最重要的一点,隐藏选择框本身.不多说了,上代码: <!doctype html> <html> <head> <meta charset="utf- ...
随机推荐
- 使用OpenCV训练Haar like+Adaboost分类器的常见问题
<FAQ:OpenCV Haartraining>——使用OpenCV训练Haar like+Adaboost分类器的常见问题 最近使用OpenCV训练Haar like+Adaboost ...
- Problem Q
Problem Description A factory produces products packed in square packets of the same height h and of ...
- C# join子句
join 子句可用于将来自不同源序列并且在对象模型中没有直接关系的元素相关联. 唯一的要求是每个源中的元素需要共享某个可以进行比较以判断是否相等的值. 例如,食品经销商可能拥有某种产品的供应商列表以及 ...
- ionic3 打包安卓平台环境搭建报错解决方案总结
1.jvm虚拟机提供的运行空间小于项目所需的空间是报错.如图: 解决方法:在环境变量中配置jvm的运行内存大小,大于所需的内存即可. 其中:-Xmx512M可根据实际提示情况,进行更改,如1024M, ...
- linux环境手动编译安装Nginx实践过程 附异常解决
1.下载nginx源码包并解压 可在http://nginx.org/en/download.html下载.tar.gz的源码包,如(nginx-1.4.7.tar.gz) 或者使用云盘下载 ht ...
- Vue js 的生命周期详解
Vue 实例的生命周期 Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列 过程,我们称这是 Vue 的生命周期.通俗说就是 Vue ...
- iOS隐藏导航栏底部灰线
首先创建 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #de38a5 } span.s1 { } span.s ...
- NoSQL：redis缓存数据库
一 Redis介绍 Redis和Memcached类似,也属于key-value nosql 数据库 Redis官网redis.io, 当前最新稳定版4.0.1 和Memcached类似,它支持存储的 ...
- SQL server中事务的四个属性特征(ACID)
事务的概念.类型和四个特征(ACID). 1.事务(Transaction)是并发控制的单位,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位. 通过事务,SQL Se ...
- C#中SQL语句参数写法
OracleConnection oc=new OracleConnection("data source=osserver;User Id=****;password=**"); ...