<!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. 容联云通讯_提供网络通话、视频通话、视频会议、云呼叫中心、IM等融合通讯能力开放平台。

    容联云通讯_提供网络通话.视频通话.视频会议.云呼叫中心.IM等融合通讯能力开放平台. undefined

  2. MongDB主从复制、复制集

    主从复制比较简单,指定master.slave即可,其中master可写可读.slave只能读不能写.向master插入数据时,mongodb会自动将数据复制到slave节点.这样做的好处是读写分离, ...

  3. fzu 2135 数字游戏 【水题】

    Problem 2135 数字游戏 Accept: 253    Submit: 392Time Limit: 1000 mSec    Memory Limit : 32768 KB Problem ...

  4. uvaoj 10397 - Connect the Campus【最小生成树】

    uvaoj 10397 - Connect the Campus Many new buildings are under construction on the campus of the Univ ...

  5. android考试题

    一.选择题 1. Math.round(11.5)等于多少(    ). Math.round(-11.5) 等于多少(   C  ). A.11 ,-11    B.11 ,-12 C.12 ,-1 ...

  6. 在LAMP环境下搭建JSP动态网页

    开发环境Linux的版本号Linux localhost.localdomain 2.6.32-358.el6.x86_64 #1 SMP Tue Jan 29 11:47:41 EST 2013 x ...

  7. python中的lambda表达

    C++中的lambda表达式与C++11增加标准库,是一个简短的匿名的可调用对象,编译器会将其转化为一个匿名类的对象.lambda表达式的最大特点就是简短灵活.调用方便.它不须要处理非常复杂的逻辑.通 ...

  8. QuaZip实现多文件打包

    项目需求: 在Goldenfarm客户端中当用户选择了本地场景文件,并进行本地场景文件分析后会产生分析结果,分析结果主要包括:贴图纹理.可渲染层等,其中贴图纹理指出了在场景文件中使用到的贴图或其它文件 ...

  9. Unity Panel open & close

    Making a Popup and Closable Panel in Unity 5 script: public GameObject thePanel; public open() { the ...

  10. System Operations on AWS - Lab 2 - Configuring VPC

    建立包含Public和Private子网的VPC,建立Internet Gateway,建立Public和Private子网的路由表,创建NAT和Bastion EC2实例 1. 配置你的私有虚拟云 ...