<!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. hdoj 1054 Strategic Game【匈牙利算法+最小顶点覆盖】

    Strategic Game Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  2. Apache Commons 工具类

    http://blog.csdn.net/feicongcong/article/details/53374399http://blog.csdn.net/hsienhua/article/detai ...

  3. jquery 书写全选反选功能

    书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. PL/SQL：使用pragma restrict_references限制包权限

    在看别人的代码的时候.发现了例如以下的编译指令. pragma restrict_references(get_attribute_name, wnds); get_attribute_name是一个 ...

  5. Android_adb使用

    Android Debug Bridge version 1.0.26 - #当升级 Android SDK 后,ADB 也会随之升级. adb [-d|-e|-s {<serialNumber ...

  6. varchar（n）和varchar(max)有什么区别

    如果列数据项的大小一致,则使用 char. 如果列数据项的大小差异相当大,则使用 varchar. 如果列数据项大小相差很大,而且大小可能超过 8,000 字节,请使用 varchar(max).

  7. android 70 使用ListView把数据显示至屏幕

    使用单元测试添加数据: package com.itheima.showdata; import java.sql.ResultSet; import android.content.Context; ...

  8. trace openjdk from systemtap

    here are several different tactics to trace openjdk from systemtap. The first relies on sys/sdt.h dt ...

  9. j2ee学习笔记 Filter过滤器

    作用:过滤response和request对象的内容 使用: Filter是J2EE的一个接口,自定义Filter需要实现该接口,并重写所有的方法. Filter提供的方法: init() doFil ...

  10. Android自定义DataTimePicker（日期选择器）

    实现的效果就是在同一个布局上显示日期选择和时间选择,时间不准确bug修复 1.自定义类DateTimePickDialogUtil.java public class DateTimePickDial ...