代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
Css
】
仿微信可换肤的CSS3美化表单
作者:
/ 发布于
2016/3/29
/
766
<!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: 80%;border:1px solid #ccc;padding: 30px;margin: 30px auto;position: relative;} .box h2{width: 100%;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 0;padding-top: 9px;} .toggle{position:relative;display:inline-block;pointer-events:auto;width: 100%;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 0.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 0 0;position: relative;} .toggle .track-switch .handle{position: absolute;top: 0px;left: 0;width: 27px;height: 27px;border-radius: 100%;background: #fff;box-shadow:0 2px 7px rgba(0,0,0,0.35),0 1px 1px rgba(0,0,0,0.15);transition: background,transform 0.3s cubic-bezier(0,1.1,1,1.1) 0s;} .toggle input:checked + .track-switch .handle{-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0);background-color:#fff;} .toggle input:checked + .track-switch{border-color:#4cd964;background-color:#4cd964;} /*checkbox*/ .toggle .track-checkbox{transition: all ease-in-out 0.25s 0s;display:inline-block;box-sizing:border-box;width:31px;height:31px;border:solid 2px #e6e6e6;border-radius:100%;background-color:#fff;content:' ';cursor:pointer;pointer-events:none;float: left;margin: 8px 10px 0 0;position: relative;} .toggle .track-checkbox .handle{position: absolute;top: 0px;left: 0;width: 27px;height: 27px;border-radius: 100%; transition: background,visibility,transform 0.3s cubic-bezier(0,1.1,1,1.1) 0s;} .toggle .track-checkbox .handle::before{content:" ";left:9px;top:12px;position:absolute;width:2px;height:30%;background:#4cd964;transform:rotate(-40deg);transition: all 0.3s cubic-bezier(0,1.1,1,1.1) 0s;visibility: hidden;} .toggle .track-checkbox .handle::after{content:" ";left:16px;top:6px;position:absolute;width:2px;height:58%;background:#4cd964;transform:rotate(-140deg);transition: all 0.3s cubic-bezier(0,1.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 0.25s 0s;display:inline-block;box-sizing:border-box;width:31px;height:31px;border:solid 2px #e6e6e6;border-radius:100%;background-color:#fff;content:' ';cursor:pointer;pointer-events:none;float: left;margin: 8px 10px 0 0;position: relative;} .toggle .track-radio .handle{position: absolute;top: 0px;left: 0;width: 27px;height: 27px;border-radius: 100%; transition: background,visibility,transform 0.3s cubic-bezier(0,1.1,1,1.1) 0s; } .toggle .track-radio .handle::before{content:" ";left:9px;top:12px;position:absolute;width:2px;height:30%;background:#4cd964;transform:rotate(-40deg);transition: all 0.3s cubic-bezier(0,1.1,1,1.1) 0s;visibility: hidden;} .toggle .track-radio .handle::after{content:" ";left:16px;top:6px;position:absolute;width:2px;height:58%;background:#4cd964;transform:rotate(-140deg);transition: all 0.3s cubic-bezier(0,1.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:#505050;background-color:#505050;} .dark input:checked + .track-checkbox{border-color:#505050;background-color:#505050;} .dark .track-checkbox .handle::before{background: #505050;} .dark .track-checkbox .handle::after{background: #505050;} .dark .track-radio .handle::before{background: #505050;} .dark .track-radio .handle::after{background: #505050;} .dark input:checked + .track-radio{border-color:#505050;background-color:#505050;} </style> </head> <body> <div class="box"> <h2><span></span> <span></span> <span></span> <span></span></h2> 选择开关 <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> 复选列表项 <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> 单选列表项 <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=0; i<aspan.length; i+=1){ aspan[i].index=i; aspan[i].style.background=color[i]; aspan[i].onclick=function(){ var label=document.querySelectorAll('label'); for(var i=0; i<label.length; i+=1){ var className=label[i].className.substring(0,15); switch(this.index) { case 0: label[i].className=className+" "+classArray[0] break; case 1: label[i].className=className+" "+classArray[1] break; case 2: label[i].className=className+" "+classArray[2] break; case 3: label[i].className=className+" "+classArray[3] break; } } } } </script> </body> </html>
试试其它关键字
美化表单
同语言下
.
前端PC-移动端CSS公共样式+HTML
.
手机端页面通用样式
.
H5页面通用头部设置
.
elect默认样式美化代码兼容移动端和pc端
.
按钮效果 css
.
唤醒app
.
放大效果
.
html5+css3实现上拉和下拉刷新
.
html上传图片后,在页面显示上传的图片
.
html5实现点击弹出图片
可能有用的
.
C#实现的html内容截取
.
List 切割成几份 工具类
.
SQL查询 多列合并成一行用逗号隔开
.
一行一行读取txt的内容
.
C#动态修改文件夹名称(FSO实现,不移动文件)
.
c# 移动文件或文件夹
.
c#图片添加水印
.
Java PDF转换成图片并输出给前台展示
.
网站后台修改图片尺寸代码
.
处理大图片在缩略图时的展示
贡献的其它代码
Label
Copyright © 2004 - 2024 dezai.cn. All Rights Reserved
站长博客
粤ICP备13059550号-3