checkbox开关

css

   .iosCheck {
/* Blue edition */
}
.iosCheck input {
display: none;
}
.iosCheck i {
display: inline-block;
cursor: pointer;
padding-right: 25px;
transition: all ease 0.2s;
-webkit-transition: all ease 0.2s;
border-radius: 25px;
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
}
.iosCheck i:before {
display: block;
content: '';
width: 25px;
height: 25px;
border-radius: 25px;
background: white;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.iosCheck :checked + i {
padding-right:;
padding-left: 25px;
background: #00e970;
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px #00e079;
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px #00e079;
}
.iosCheck.blue :checked + i {
background: #6cbff0;
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px #0093ea;
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px #0093ea;
}
/* General styling */

html

<label class="iosCheck">
<input type="checkbox" name="register_give_switch"/>
<i></i>
</label>

css按钮

css

 /* clean gray ***  start *******************************************************************************/
.clean-gray {
background-color: #eeeeee;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
background-image: linear-gradient(top, #eeeeee, #cccccc);
border: 1px solid #ccc;
border-bottom: 1px solid #bbb;
border-radius: 3px;
color: #333;
font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 1px 0;
text-align: center;
text-shadow: 0 1px 0 #eee;
width: 150px;
}
.clean-gray:hover {
background-color: #dddddd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
background-image: linear-gradient(top, #dddddd, #bbbbbb);
border: 1px solid #bbb;
border-bottom: 1px solid #999;
cursor: pointer;
text-shadow: 0 1px 0 #ddd;
}
.clean-gray:active {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}
.detail-btn {
margin: 0 auto;
padding: 0 10px;
text-decoration: none;
}
.detail-btn:hover {
text-decoration: none;
}
/* clean gray *** end *******************************************************************************/

html

<span  class="clean-gray detail-btn sorry">取消</span>

css 样式(checkbox开关、css按钮)的更多相关文章

  1. 纯css实现checkbox开关切换按钮

    我们都知道 checkbox 标签默认样式 实在是太low了,故对CheckBox美化很有必要. 现提供两种方式对其进行美化. 方法一 <div class="switch-wrap ...

  2. web前端(7)—— 了解CSS样式,引入css样式的方式

    CSS 在前面大概的介绍了css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打 ...

  3. 用CSS美化checkbox复选按钮和raido单选按钮-适用于移动端

    最终效果: 实现方法 index.html: <!DOCTYPE html> <html> <head> <title></title> & ...

  4. css样式重叠、css样式继承、css 属性计算,,a元素下的文字颜色不能继承

    1.属性的重叠 在渲染前浏览器将判断使用哪个样式 我们书写的样式会覆盖浏览器的自带样式 我们写的样式进行权重比较,规则如下 !import Infiniti无穷大 进制伪256行内样式 1000.id ...

  5. HTML篇之CSS样式:<button></button>按钮变成超链接<a></a>的样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. bootstrap之css样式

    一 bootstrap的介绍 Bootstrap是将html,css和js的代码打包好了,只管我们拿来调用.是基于jquery开发的. 使用BootCDN提供的免费CDN加速服务,同时支持http和h ...

  7. 【03】全局 CSS 样式

    全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...

  8. [css]样式合并与模块化

    原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E7%9A%84%E6%A0%B7%E5%BC%8F%E5%90%88%E5%B9%B6%E4 ...

  9. html学习第二天—— 第七章——CSS样式基本知识

    外部式css样式,写在单独的一个文件中外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<s ...

随机推荐

  1. LeakCanary: 让内存泄露无所遁形

    LeakCanary: 让内存泄露无所遁形 09 May 2015 本文为LeakCanary: Detect all memory leaks!的翻译.原文在: https://corner.squ ...

  2. ArrayList和HashSet的比较

    ArrayList是数组存储的方式 HashSet存储会先进行HashCode值得比较(hashcode和equals方法),若相同就不会再存储 HashCode和HashSet类 Hashset就是 ...

  3. 2017.2.21 Java中正则表达式的学习及示例

    学习网站:菜鸟教程 http://www.runoob.com/java/java-regular-expressions.html 1 正则表达式的基本使用 (1)类 正则表达式并不仅限于某一种语言 ...

  4. svn自动部署

    版本库目录hooks下创建post-commit.bat TortoiseProc.exe /command:update /path:"E:\web_server\sial\" ...

  5. Struts2学习一----------Struts2的工作原理及HelloWorld简单实现

    © 版权声明:本文为博主原创文章,转载请注明出处 Struts2工作原理 一个请求在Struts2框架中的处理步骤: 1.客户端初始化一个指向Servlet容器(例如Tomcat)的请求 2.这个请求 ...

  6. Spring学习十三----------Spring AOP的基本概念

    © 版权声明:本文为博主原创文章,转载请注明出处 什么是AOP -面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术 -主要的功能是:日志记录.性能统计.安全控制.事务处理. ...

  7. php图片本身有错无法显示的解决办法

    1.取消所有错误提示 2.如果没有报错,在header前(即设置输出格式前)使用ob_clean();

  8. Sping Boot入门到实战之实战篇(二):一些常用功能的Spring Boot Starters

    包含功能 阿里云消息服务MNS 阿里云消息队列服务(即时消息.延迟消息.事务消息) AOP日志 基于MyBatis通用Mapper及DRUID的数据库访问 dubbo支持 错误处理 七牛图片服务 re ...

  9. wifi认证Portal开发系列(二):FreeRadius的安装和测试、关联Mysql

    注:本次安装是基于FreeRadius 3版本进行安装配置的,在配置Mysql的过程中,与2版本有些不同.操作系统是CentOS 7 一.准备工作 工具的安装 #安装rz.sz命令用于文件上传 yum ...

  10. FTPHelper类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...