<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>仿微信可换肤的CSS3美化表单，</title>

    <link rel="stylesheet" href="http://www.jcpeixun.com/lesson1/css/web_reset.css">

    <style>

    .box{width: %;border:1px solid #ccc;padding: 30px;margin: 30px auto;position: relative;}

    .box h2{width: %;height: 30px;top: 20px;right: 30px;text-align: right;position: absolute;}

    .box h2 span{display: inline-block;width: 16px;height: 16px;margin: 2px;background: red;}

    .box p{font-size: 16px;border-bottom: 1px dashed #4cd964;padding: 12px ;padding-top: 9px;}

    .toggle{position:relative;display:inline-block;pointer-events:auto;width: %;border-bottom: 1px dashed #ccc; }

    .labelTxt{display: inline-block;height: 51px;line-height: 51px;float: left;}

    /*switch*/

    .toggle .track-switch{transition: all ease-in-out .25s 0s;display:inline-block;box-sizing:border-box;width:51px;height:31px;border:solid 2px #e6e6e6;border-radius:20px;background-color:#fff;content:' ';cursor:pointer;pointer-events:none;float: left;margin: 10px 10px  ;position: relative;}

    .toggle .track-switch .handle{position: absolute;top: 0px;left: ;width: 27px;height: 27px;border-radius: %;background: #fff;box-shadow: 2px 7px rgba(,,,0.35), 1px 1px rgba(,,,0.15);transition: background,transform .3s cubic-bezier(,1.1,,1.1) 0s;}

    .toggle input:checked + .track-switch .handle{-webkit-transform:translate3d(20px,,);transform:translate3d(20px,,);background-color:#fff;}

    .toggle input:checked + .track-switch{border-color:#4cd964;background-color:#4cd964;}

    /*checkbox*/

      .toggle .track-checkbox{transition: all ease-in-out .25s 0s;display:inline-block;box-sizing:border-box;width:31px;height:31px;border:solid 2px #e6e6e6;border-radius:%;background-color:#fff;content:' ';cursor:pointer;pointer-events:none;float: left;margin: 8px 10px  ;position: relative;}

      .toggle .track-checkbox .handle{position: absolute;top: 0px;left: ;width: 27px;height: 27px;border-radius: %;  transition: background,visibility,transform .3s cubic-bezier(,1.1,,1.1) 0s;}

    .toggle .track-checkbox .handle::before{content:" ";left:9px;top:12px;position:absolute;width:2px;height:%;background:#4cd964;transform:rotate(-40deg);transition: all .3s cubic-bezier(,1.1,,1.1) 0s;visibility: hidden;}

    .toggle .track-checkbox .handle::after{content:" ";left:16px;top:6px;position:absolute;width:2px;height:%;background:#4cd964;transform:rotate(-140deg);transition: all .3s cubic-bezier(,1.1,,1.1) 0s;visibility: hidden;}

    .toggle input:checked + .track-checkbox{border-color:#4cd964;background-color:#4cd964;}

    .toggle input:checked + .track-checkbox .handle::before{visibility:visible;background: #fff;}

    .toggle input:checked + .track-checkbox .handle::after{visibility:visible; background: #fff;}

    /*radio*/

    .toggle .track-radio{transition: all ease-in-out .25s 0s;display:inline-block;box-sizing:border-box;width:31px;height:31px;border:solid 2px #e6e6e6;border-radius:%;background-color:#fff;content:' ';cursor:pointer;pointer-events:none;float: left;margin: 8px 10px  ;position: relative;}

      .toggle .track-radio .handle{position: absolute;top: 0px;left: ;width: 27px;height: 27px;border-radius: %;  transition: background,visibility,transform .3s cubic-bezier(,1.1,,1.1) 0s; }

      .toggle .track-radio .handle::before{content:" ";left:9px;top:12px;position:absolute;width:2px;height:%;background:#4cd964;transform:rotate(-40deg);transition: all .3s cubic-bezier(,1.1,,1.1) 0s;visibility: hidden;}

    .toggle .track-radio .handle::after{content:" ";left:16px;top:6px;position:absolute;width:2px;height:%;background:#4cd964;transform:rotate(-140deg);transition: all .3s cubic-bezier(,1.1,,1.1) 0s;visibility: hidden;}

    .toggle input:checked + .track-radio{border-color:#4cd964;background-color:#4cd964;}

    .toggle input:checked + .track-radio .handle::before{visibility:visible;background: #fff;}

    .toggle input:checked + .track-radio .handle::after{visibility:visible; background: #fff;}

    /*皮肤*/

    .red input:checked + .track-switch{border-color:#ef473a;background-color:#ef473a;}

    .red input:checked + .track-checkbox{border-color:#ef473a;background-color:#ef473a;}

    .red .track-checkbox .handle::before{background: #ef473a;}

    .red .track-checkbox .handle::after{background: #ef473a;}

    .red .track-radio .handle::before{background: #ef473a;}

    .red .track-radio .handle::after{background: #ef473a;}

    .red input:checked + .track-radio{border-color:#ef473a;background-color:#ef473a;}

    .yellow input:checked + .track-switch{border-color:#f90;background-color:#f90;}

    .yellow input:checked + .track-checkbox{border-color:#f90;background-color:#f90;}

    .yellow .track-checkbox .handle::before{background: #f90;}

    .yellow .track-checkbox .handle::after{background: #f90;}

    .yellow .track-radio .handle::before{background: #f90;}

    .yellow .track-radio .handle::after{background: #f90;}

    .yellow input:checked + .track-radio{border-color:#f90;background-color:#f90;}

    .blue input:checked + .track-switch{border-color:#0c63ee;background-color:#0c63ee;}

    .blue input:checked + .track-checkbox{border-color:#0c63ee;background-color:#0c63ee;}

    .blue .track-checkbox .handle::before{background: #0c63ee;}

    .blue .track-checkbox .handle::after{background: #0c63ee;}

    .blue .track-radio .handle::before{background: #0c63ee;}

    .blue .track-radio .handle::after{background: #0c63ee;}

    .blue input:checked + .track-radio{border-color:#0c63ee;background-color:#0c63ee;}

    .dark input:checked + .track-switch{border-color:#;background-color:#;}

    .dark input:checked + .track-checkbox{border-color:#;background-color:#;}

    .dark .track-checkbox .handle::before{background: #;}

    .dark .track-checkbox .handle::after{background: #;}

    .dark .track-radio .handle::before{background: #;}

    .dark .track-radio .handle::after{background: #;}

    .dark input:checked + .track-radio{border-color:#;background-color:#;}

    </style>

</head>

<body>

    <div class="box">

        <h2><span></span>

        <span></span>

        <span></span>

        <span></span></h2>

        <p>选择开关</p>

        <label class="toggle clearfix">

            <input type="checkbox" checked style="display: none;">

            <div class="track-switch">

                <div class="handle"></div>

            </div>

            <div class="labelTxt">是否同意条款</div>

        </label>

        <p>复选列表项</p>

        <label class="toggle clearfix">

            <input type="checkbox" checked style="display: none;">

            <div class="track-checkbox">

                <div class="handle"></div>

            </div>

            <div class="labelTxt">我的职业是前端工程师</div>

        </label>

        <label class="toggle clearfix">

            <input type="checkbox" checked style="display: none;">

            <div class="track-checkbox">

                <div class="handle"></div>

            </div>

            <div class="labelTxt">我的职业是老师</div>

        </label>

        <p>单选列表项</p>

        <label class="toggle clearfix" >

            <input type="radio"  checked style="display: none;" name="sex">

            <div class="track-radio">

                <div class="handle"></div>

            </div>

            <div class="labelTxt">姓别：男</div>

        </label>

        <label class="toggle clearfix"  >

            <input type="radio" style="display: none;" name="sex">

            <div class="track-radio">

                <div class="handle"></div>

            </div>

            <div class="labelTxt">姓别：女</div>

        </label>

    </div>

    <script>

        var aspan=document.querySelector('.box').querySelectorAll('span');

        var color=["#ef473a","#f90","#0c63ee","#505050"];

        var classArray=["red","yellow","blue","dark"]

        for(var i=; i<aspan.length; i+=){

             aspan[i].index=i;

            aspan[i].style.background=color[i];

            aspan[i].onclick=function(){

                var label=document.querySelectorAll('label');

                for(var i=; i<label.length; i+=){

                    var className=label[i].className.substring(,);

                     switch(this.index) {

                         case :

                             label[i].className=className+" "+classArray[]

                             break;

                         case :

                             label[i].className=className+" "+classArray[]

                             break;

                         case :

                             label[i].className=className+" "+classArray[]

                             break;

                         case :

                             label[i].className=className+" "+classArray[]

                             break;

                     }

                }

            }

        }

    </script>

</body>

</html>

CSS3美化表单 移动端可用的更多相关文章

  1. CSS3美化表单控件

    表单的默认控件在不同的浏览器中的样式不同,用户体验很差.用CSS3可以实现表单控件的美化,可以提供更好的用户体验.不足之处就是浏览器的兼容性问题. 一.下拉控件 效果图: 下拉控件的布局结构: < ...

  2. 开始使用HTML5和CSS3验证表单

    使用HTML5和CSS3验证表单 客户端验证是网页客户端程序最常用的功能之一,我们之前使用了各种各样的js库来进行表单的验证.HTML5其实早已为我们提供了表单验证的功能.至于为啥没有流行起来估计是兼 ...

  3. 应用Css美化表单

    原来的效果  美化之后的效果  实现代码 <style> .container { margin:0auto; width:620px; } fieldset { padding:18px ...

  4. 学习笔记 第十章 使用CSS美化表单

    第10章   使用CSS美化表单 [学习重点] 正确使用各种表单控件 熟悉HTML5新增的表单控件 掌握表单属性的设置 设计易用性表单页面 10.1  表单的基本结构 表单包含多个标签,由很多控件组成 ...

  5. angular表单验证实例----可用的代码

    前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...

  6. 自制“低奢内”CSS3注册表单，包含JS验证哦。请别嫌弃,好吗？。

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...

  7. css3属性：美化表单、点击元素产生的背景与边框怎么去掉，滚动回弹效果

  8. 动态背景的CSS3登录表单

    在线演示 本地下载

  9. CSS3动画表单

    在线演示 本地下载

随机推荐

  1. Linux常用命令及vim的使用、vim常用插件（推荐）

    看了3篇文章,很好 vim中的区域拷贝 剪切,粘贴: 正常模式,移动光标到剪切的区域开始处,按v,进入可视模式,然后选择区域.按x键,剪切.到指定位置按p粘贴. 撤销按u 恢复按ctrl-r  简明 ...

  2. nginx查看进程连接信息

    linux 中查看当前请求连接的进程统计信息 root@VM-24-181-ubuntu:/# netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) ...

  3. NIO机制总结

    Selector selector = Selector.open(); 普通的IO流的读取,写入都是一个字节一个字节或一个字符一个字符的循环进行,在这个过程中,程序是阻塞的,inputStream虽 ...

  4. C#目录文件复制、创建操作

    using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Secu ...

  5. 用WidgeDuino创建一个SCADA（监控与数据採集）系统

    WidgeDuino – 近期在Kickstarter上亮相 – 是一个智能的易配置的窗体- 基于Microsoft Windows平台和基于像 Atmel-based Arduino board 的 ...

  6. iBatis自动生成的主键 (Oracle,MS Sql Server,MySQL)【转】

    iBatis的sqlMap配置文件的selectKey元素有个type属性,可以指定pre或者post表示前生成(pre)还是后生成(post). Oracle设置 <!-- Oracle SE ...

  7. JMeter对Oracle数据库进行压力测试

    步骤 (1)复制ORACLE的JDBC驱动JAR包文件(ojdbc14.jar)到JMeter的lib目录下. (2)运行jmeter.bat (3)建立线程组:右键测试计划->添加->T ...

  8. Linux重复执行上一条命令

    执行刚刚执行的一条命令: !! 执行最近一个以指定字符串开头的命令(比如man) !man !m 引用上一个命令的最后一个参数 !$ <ESC>, .

  9. SharePoint SiteCollection Administrator

    到网上去找怎么取到一个站点的sitecollection  Administrator, 如果设置了一个站点的 sitecollection  Administrator, 那么通过: SPSite ...

  10. vue写请求接口--请求参数的变量要在return里面声明

    //谨记return里面是返回所有声明的变量的名字,数组以及对象等等 export default { data () { return { //所有的变量都是写在data 的return里面的,主要 ...