利用纯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- ...
随机推荐
- 使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular
上一篇: http://www.cnblogs.com/cgzl/p/7755801.html 完成client.service.ts: import { Injectable } from '@an ...
- [Scikit-learn] 2.1 Clustering - Variational Bayesian Gaussian Mixture
最重要的一点是:Bayesian GMM为什么拟合的更好? PRML 这段文字做了解释: Ref: http://freemind.pluskid.org/machine-learning/decid ...
- angular控制器、服务和指令三者之间的关系
从总体来看,这三个组件的关系如下所示: 服务负责从远端服务器抓取和存储数据. 基于服务构建的控制器将为angular的作用域层次提供数据和功能. 基于服务和控制器构建的指令将直接与文档对象模型(DOM ...
- 用ajax的同步请求解决登陆注册需要根据服务器返回数据判断是否能提交的问题
最近在写www.doubilaile.com的登陆注册.需要用ajax请求服务器判断用户名是否存在,用户名和密码是否匹配,进而提交数据.碰到的问题是异步请求都能成功返回数据,但是该数据不能作为紧接着的 ...
- 一台服务部署多个tomcat注意事项
第一步 添加tomcat环境变量 # vim /etc/profile加入下代码 # TOMCAT ATALINA_BASE=/usr/local/tomcat8CATALINA_HOME=/usr ...
- node调试工具--node-inspector安装
node-inspector安装: npm install --registry=http://r.cnpmjs.org -g cnpm cnpm install -g node-inspector ...
- arguments对象
改变函数arguments也会改变对应的参数,arguments会自动映射到对应的参数上 但是改变参数并不会同步改变arguments 它们并不公用内存 在strict模式,不能对arguments付 ...
- javaScript中的return，break，continue的区别
导语: javaScript中有三种方法可以跳出循环或者终止循环.分别为break.return.continue. 正文: 一.break break 会使得整个程序终止执行或者包含了最内层的循环或 ...
- curl模拟带验证码的登录
首先说明,不是用php自动识别验证码,而是有验证码的情况下,让你通过curl 带着cookies去请求远程资源,从而通过合法的身份验证.主要用来抓取需要登录后才能访问的资源. 思路就是获取到验证码之后 ...
- 简易RPC框架-代理
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...