CSS模拟苹果系统开关按钮效果
网页移动端开发时经常遇到开关按钮,而html表单没有相对于的按钮,这时我们就需要利用checkbox的功能来模拟开关按钮,具体实现方法和checkbox和radio自定义的方法类似,具体可以结合网站中的优化checkbox和radio方法对比学习。
这里介绍的是利用css对开关按钮实现的方法,当然大家也可以尝试用js的方法修改,利用纯css存在兼容问题,在IE9及以上才能正常显示,支持谷歌、火狐等主流浏览器。
最终效果图如下:
实现原理:添加一个label和input标签,然后在label标签里添加span/em标签(用于模仿开关的样式),默认然input标签隐藏,span/em做成开关样式(css样式控制),然后利用:loael:checked伪类选择器控制按钮是否选中,选中需要切换下span的图片。
HTML代码:
开关按钮
<div>
<input type="checkbox" id="blance" value="" >
<label for="blance"><em></em></label>
</div>
<div>
<input type="checkbox" id="blance1" value="" checked="" >
<label for="blance1"><em></em></label>
</div>
CSS代码
.Switch input {
display: none
}
.switchLable {
width: 52px;
background: #CCC;
height: 28px;
border-radius: 14px;
float: right;
margin: 8px 10px 0 0;
box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
}
.switchLable em {
width: 26px;
height: 26px;
float: left;
margin: 1px;
border-radius: 13px;
box-shadow: 2px 3px 8px rgba(0,0,0,.1);
background: #FFF;
}
#blance:checked + label {
background: #52d864;
}
#blance:checked + label em {
float: right;
}
#blance:disabled + label {
opacity: 0.5
}
这样就可以实现开关的效果!
使用注意事项,因为label的for参数是绑定id的,所以需要对每个switch中的input都需要设置id属性,同时设置好id属性后再样式中也需要针对不同id设置他的:checked伪类选择器的样式【见css样式红色部分】
最后在对应开关中input需要动态修改value的值,切换开关时,当开关打开时设置value=1;关闭时value=0;这里需要用js/jq来设置;
JS/JQ代码 [为了简化代码这里用jq来实现 ]
("#blance,#blance1").change(function () {
if($(this).attr('checked')){
$(this).val(1)
$(".switchShow").show();
}else{
$(this).val(0);
$(".switchShow").hide();
}
})
效果演示:www.intewl.com/demo/ui/index.html
代码下载:https://pan.baidu.com/s/1MQvGx8SfK5ceIm2dHUZc_g
999浏览量 · 0评论 · 2018-11-09 11:41:32
热门专题
-
01
前端 / HTML超文本标记语言,标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分
13 篇文章
-
02
前端 / JS/JQjQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。
31 篇文章
-
03
前端 / CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
15 篇文章
-
04
前端 / VUE Vue是一套构建用户界面的渐进式框架。 Vue只关注视图层,采用自底向上增量开发的设计。
41 篇文章
-
05
设计 / PhotoshopPhotoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具,可以有效地进行图片编辑工作。
0 篇文章
-
06
后端 / PHPPHP,一个嵌套的缩写名称,是英文超级文本预处理语言(PHP:Hypertext Preprocessor)的缩写。PHP 是一种 HTML 内嵌式的语言
0 篇文章
-
07
设计 / aihtml是超文本标记语言
0 篇文章
-
08
后端 / ThinkPhpThinkPHP是为了简化企业级应用开发和敏捷WEB应用开发而诞生的。遵循Apache2开源协议发布。简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。
5 篇文章
-
09
前端 / 微信小程序微信小程序,简称小程序,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
3 篇文章
-
10
办公 / WordWord 提供了许多易于使用的文档创建工具,同时也提供了丰富的功能集供创建复杂的文档使用。
2 篇文章
全部评论 0