switch开关兼容IE8时，用button代替checkbox做成switch开关

最新推荐文章于 2018-04-07 22:14:52 发布
最新推荐文章于 2018-04-07 22:14:52 发布
阅读量1.2k 收藏
点赞数 1
文章标签： 前端 css switch开关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq294640262/article/details/79238825
版权
本文介绍了如何在不支持:before和:checked选择器的IE8中，利用button元素和CSS来创建switch开关效果。通过这种方法，可以确保在IE8及更高版本的浏览器中都能正常显示。
摘要由CSDN通过智能技术生成

在做switch开关兼容ie浏览器时，遇到了坑，其中的：before选择器和：checked在IE8中不兼容，思来想去，就取了个巧，用button加css做成switch开关。

做成的效果为：IE8：    IE9+：

最低0.47元/天 解锁文章
裸梦的猪
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3 SVG Switch Button Checkbox 开关按钮.rar
07-10
**CSS3 SVG Switch Button Checkbox 开关按钮** 在Web开发中，设计吸引人的用户界面是至关重要的，CSS3和SVG（可缩放矢量图形）的结合为此提供了强大的工具。本资源提供了一种实现SVG开关按钮的方法，适用于移动...
点击按钮切换复选框选中
Sunflower_knight的博客
05-07 883
HTML部分 首先我们需要设置好需要两个input标签,将一个的类型设置为button按钮,另一个设置为checkbox复选框并为它们分别设置好id； JavaScript部分 首先我们需要引入jq的文件，再写上一个页面加载事件，然后获取按钮的id并为其绑定点击事件在点击事件里进行一个判断,如果复选框为选中的时候那么点击按钮的时候它将被取消选中,否则将执行下面的代码； 总结； 这次的代码主要了解的是prop()和if判断的用法，只要掌握好了，完成这次的代码并不难，有些地方可能讲的不是太对...
前端开发之如何兼容IE8等旧IE浏览器
zhoulu001的专栏
09-08 1万+
最近一个采用angular的前端项目需要兼容IE8浏览器，为了兼容这旧版本的IE浏览器，花费不少时间，先特将心得记录如下。 为了使不兼容HTML5和CSS3新特性的IE等浏览器兼容最新特性，其实已经有人写了一些库。 1. html5shiv html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用
[css]switch开关按钮，适用于移动端和IE9火狐谷歌
hamupp的博客
05-10 1854
pc 火狐 ie9 谷歌 switch 开关 按钮
一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
小诺
11-26 7万+
在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题？ 百度源代码如下： 1 2 html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml> 3 head> 4 m
使用Bootstrap时，在ie8浏览器下兼容问题的解决方式
liyi830的专栏
04-07 7540
参考 bootstrap 官网主页的代码，如下，并不能在自己的项目中正确兼容ie8，经过反复调试，发现其实根本问题是，下列的.js文件和.css 文件需要下载到本地，特别是为了兼容ie8的 html5shiv.min.js 和 respond.min.js 这两个文件。 这里记录下来，以便今后开发基于 bootstrap的项目。 <!DOCTYPE html> <html l...
switch-button:HTML和CSS的简单开关按钮示例
05-25
标题中的"switch-button"指的是在Web开发中常见的一种交互元素，即开关按钮。开关按钮通常用于用户界面，允许用户在两种状态之间切换，例如开启或关闭某个功能。它由两部分组成：通常一个滑动的小圆盘或者方块，可以...
仿iOS的开关(Switch)按钮控件源码.zip
07-03
仿iOS的开关(Switch)按钮控件源码，源码switchbtn，iOS的SwitchButton深入人心，也被Android上的产品设计借鉴，在Android4.0中，系统就带有原生的Switch控件了。但是在老版本的Android上，怎样实现这个功能呢？最...
Bootstrap Switch 开关控制插件
01-18
Bootstrap Switch 是一个基于Bootstrap框架的扩展插件，它为用户提供了一种美观且易于使用的开关（toggle）控制，常用于在两种状态之间切换，比如开/关、是/否或者真/假等二元选择。这个插件使得网页设计更加直观，...
UI控件之开关按钮（ToggleButton与Switch）Demo
01-07
`ToggleButton`是Android中的一个视图类，它继承自`CheckBox`，但它的外观和行为更像一个开关。当用户点击`ToggleButton`时，它会改变颜色或形状，以显示当前的状态（开或关）。`ToggleButton`通常有两种样式：默认...
XSwitch全屏滚动特效--兼容IE8和Chrome浏览器
zyytaiyame的博客
01-05 1649
XSwitch全屏滚动特效-兼容IE8和Chrome浏览器电子图书翻书页的JS特效，由于IE支持太好，FLASH未来要淘汰，所以折中用了一个全屏滚动特效来替换，因为电子图书大部分也是图片，图片采用全屏拉伸<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>XSwitch</title> <
input开关按钮
FEE
12-01 6145
<input class="switch-btn switch-btn-animbg" type="checkbox" checked> <label><input class="switch-btn switch-btn-animbg" type="checkbox" checked> 默认选中</label>.switch-btn { cursor: pointer; width: 45
bootstrapSwitch用法
朱明代月的博客
11-17 4万+
  bootstrapSwitch是一个很美观的切换控件，官网上对它的介绍也很详细。下面通过几个demo快速上手bootstrapSwitch。     首先，引用相应的js和css文件，把checkbox放进class为“switch”的div中，再在js中初始化   $('#mySwitch input').bootstrapSwitch(); 就可以使用bootstrapSwi...
HTML/CSS 自定义开关按钮控件(switch)样式
热门推荐
清风的博客
07-15 7万+
今天这篇文章给大家带来的是在移动端很常见的开关控件。样式主要是通过CSS来定制完成，上一篇博客讲的是自定义滑动条的样式，同样是自定义样式，上一篇是直接通过CSS对 input[type="range"] 进行样式改造，而今天这一篇实现思路是上一次提到过的另一种方案，将input控件隐藏，通过其他标签来完成样式的定制。这样做的好处就在于更加的灵活，这是我们今天所要达到的效果。下面就让我们一起来看看怎
CSS做一个Switch开关
weixin_34138056的博客
02-28 445
本文为博主原创，转载请注明出处。　　 　　Switch开关： 　　 　　 　　根据需求可知，Switch开关只有两种选择，true或false。所以我们想到HTML的checkbox控件，用它来做。　　 <input id="switch" type="checkbox" class="switch" /> 　　但是在浏览器中，checkbox是有固定形...
写一个调查问卷的微信小程序，需要包括button,checkbox,form,input,picker,picker-view,radio,slider,swider,switch,textarea这十种表单组件，要求提交之后可以看到结果
最新发布
05-10
<button formType="submit">提交</button> ``` ```javascript // index.js Page({ data: { ageArray: ['18岁以下', '18-25岁', '26-35岁', '36-45岁', '46岁以上'], ageIndex: 0, hobbies: [] }, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值