CSS3美化表单移动端可用

<!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美化表单移动端可用的更多相关文章

CSS3美化表单控件
表单的默认控件在不同的浏览器中的样式不同,用户体验很差.用CSS3可以实现表单控件的美化,可以提供更好的用户体验.不足之处就是浏览器的兼容性问题. 一.下拉控件效果图: 下拉控件的布局结构: < ...
开始使用HTML5和CSS3验证表单
使用HTML5和CSS3验证表单客户端验证是网页客户端程序最常用的功能之一,我们之前使用了各种各样的js库来进行表单的验证.HTML5其实早已为我们提供了表单验证的功能.至于为啥没有流行起来估计是兼 ...
应用Css美化表单
原来的效果美化之后的效果实现代码 <style> .container { margin:0auto; width:620px; } fieldset { padding:18px ...
学习笔记第十章使用CSS美化表单
第10章使用CSS美化表单 [学习重点] 正确使用各种表单控件熟悉HTML5新增的表单控件掌握表单属性的设置设计易用性表单页面 10.1 表单的基本结构表单包含多个标签,由很多控件组成 ...
angular表单验证实例----可用的代码
前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...
自制“低奢内”CSS3注册表单，包含JS验证哦。请别嫌弃,好吗？。
要求必备知识基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址演示地址预览截图(抬抬你的鼠标就可以看到 ...
css3属性：美化表单、点击元素产生的背景与边框怎么去掉，滚动回弹效果
动态背景的CSS3登录表单
在线演示本地下载
CSS3动画表单
在线演示本地下载

随机推荐

hostname、uname、dmesg、fdisk
hostname uname fdisk -l
yii CListView中使用CArrayDataProvider自定义数组作为数据
CArrayDataProvider类手册: http://www.yiichina.com/api/CArrayDataProvider 在yii中无论是CListView还是CGridView,对 ...
Linux下SVN命令总结
目录一.从版本库获取信息... 1 二.从版本库到本地... 2 三.从本地到版本库... 2 四.高级应用... 4 一.从版本库获取信息 svn help command 获取子命令说明 svn ...
[学习笔记]设计模式之Abstract Factory
写在前面为方便读者,本文已添加至索引: 设计模式学习笔记索引在上篇笔记Builder设计模式中,时の魔导士祭出了自己的WorldCreator.尽管它因此能创造出一个有山有树有房子的世界,但是白 ...
使用CLRMD编写一个自己的C#调试器
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:使用CLRMD编写一个自己的C#调试器.
Java-struts2的问题 java.lang.NoClassDefFoundError: org/apache/commons/lang3/StringUtils
缺commons-lang3-3.1.jar,添加之后就可以了
利用Ajax把前端的数据封装成JSON格式发送到服务器端并写成XML格式在服务器的硬盘上
1.首先要在前端把要发送的东西(这里是一个实例化的car对象)都准备好,利用Ajax发送到服务器端,代码如下: <html xmlns="http://www.w3.org/1999/ ...
[TypeScript] Using Typings and Loading From node_modules
Using TypeScript when installing packages from npm often requires you to install related definition ...
There is an error while getting planid. No Free partitions available
问题概述 Oracle Advanced Supply Chain Planning最初的设置职责的时候有点问题,不知是不是要打什么补丁或其它配置什么东东,, 这个提示,,但我查到的分区是还有可用分区 ...
TCP keepalive
2. TCP keepalive overview In order to understand what TCP keepalive (which we will just call keepa ...

CSS3美化表单 移动端可用

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

随机推荐

热门专题

CSS3美化表单移动端可用

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