通过css3实现开关选择按钮

最新推荐文章于 2021-12-02 09:00:38 发布
最新推荐文章于 2021-12-02 09:00:38 发布
阅读量115 收藏
点赞数
原文链接：http://www.cnblogs.com/CCDS01/p/6261578.html
版权

 

通过css属性实现如图所示按钮

要点：通过checkbox选中与否的状态与兄弟选择器实现相关功能
1.设置开关大小并设置定位方式为relative

.swift-btn {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}


2.设置checkbox属性，并设置为不可见状态

.swift-btn input[type='checkbox'] {

    position: absolute;

    width: 50px;

    height: 25px;

    opacity: 0;

    z-index: 9;

    outline: none;

}

3.设置按钮样式，通过伪类元素实现，并添加过渡动画

.swift-btn > label{
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 25px;
    border-radius: 25px;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}
.swift-btn > label:before {
    content: '';
    position: absolute;
    display: inline-block;
    left: 40px;
    width: 25px;
    height: 25px;
    border-radius: 20px;
    line-height: 25px;
    text-indent: -1px;
}
.swift-btn > label:after {
    content: '';
    position: absolute;
    display: inline-block;
width: 24px;
    height: 24px;
    left: 0;
    top: 1px;
    border-radius: 1px;
    box-shadow:2px 0px 1px #ddd;
    border-radius: 15px;
    
    transition: left 0.3s ease;
    -webkit-transition: left 0.3s ease;
    -moz-transition: left 0.3s ease;
}
 
 

4.设置input选中后的样式

.swift-btn input[type='checkbox']:checked + label{

    border: 1px solid #000;

    background-color: #000;

}

.swift-btn input[type='checkbox']:checked + label::before {

    display: inline-block;

    color: #fff;

    text-indent: -25px;

}

.swift-btn input[type='checkbox']:checked + label::after {

    left: 26px;

    top: 1px;

    width: 24px;

    height: 24px;

    border: 0;

    box-shadow: none;

    box-sizing: content-box;

}


完整代码示例

<!DOCTYPE html>

<html>

<meta charset='utf-8'>

 

<style>

.swift-btn {

    position: relative;

    display: inline-block;

    width: 50px;

    height: 25px;

}

.swift-btn input[type='checkbox'] {

    position: absolute;

    width: 50px;

    height: 25px;

    opacity: 0;

    z-index: 9;

    outline: none;

}

.swift-btn > label{

    position: absolute;

    display: inline-block;

    width: 50px;

    height: 25px;

    border-radius: 25px;

    border: 1px solid #ddd;

    transition: all 0.3s ease;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

}

.swift-btn > label:before {

    content: '';

    position: absolute;

    display: inline-block;

    left: 40px;

    width: 25px;

    height: 25px;

    border-radius: 20px;

    line-height: 25px;

    text-indent: -1px;

}

.swift-btn > label:after {

    content: '';

    position: absolute;

    display: inline-block;

    width: 24px;

    height: 24px;

    left: 0;

    top: 1px;

    border-radius: 1px;

    box-shadow:2px 0px 1px #ddd;

    border-radius: 15px;

    background-color: #fff;

    transition: left 0.3s ease;

    -webkit-transition: left 0.3s ease;

    -moz-transition: left 0.3s ease;

}

.swift-btn input[type='checkbox']:checked + label{

    border: 1px solid #000;

    background-color: #000;

}

.swift-btn input[type='checkbox']:checked + label::before {

    display: inline-block;

    color: #fff;

    text-indent: -25px;

}

.swift-btn input[type='checkbox']:checked + label::after {

    left: 26px;

    top: 1px;

    width: 24px;

    height: 24px;

    border: 0;

    box-shadow: none;

    box-sizing: content-box;

}

</style>

 

<body>

<span class="add-item-status swift-btn">

    <input type="checkbox" name="" id='checkbox' />

    <label class="" for='checkbox'></label>

</span>

</body>

</html>



转载于:https://www.cnblogs.com/CCDS01/p/6261578.html

dbfgefai009910
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3特效-移动端开关按钮样式
tian_tian_gong的博客
01-25 2497
在移动web中，经常会用到一个开关按钮。 其本质是checkbox。 效果图 代码 //css /*switch*/ .switch { position: relative; display: inline-block; width: 50px; height: 30px; } .switch input[type=checkbox] { display: none;...
CSS3开关按钮
dx0829的博客
06-12 584
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; .wrap{ height:30px; width:60px;} inpu
CSS3实现开关按钮效果
KoalaShane
12-20 2520
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3自定义Checkbox特效DEMO演示</title> </head> <style type="text/css"> .tgl{display:none} .tgl,.tgl *,.tgl :after,.tgl :before,.tgl+.tgl-btn,.tg
33种css3开关按钮特效，附源码
web前端开发
11-11 1108
今天，我要跟各位分享的是一组CSS3开关按钮特效。该CSS3开关按钮特效共33种效果，支持ie9以上的主流浏览器，非常实用。效果截图如下：源码下载地址：https://...
CSS3立体开关按钮特效
07-31
总结，CSS3立体开关按钮特效是通过结合`transform`、`box-shadow`、`transition`等CSS3特性，以及巧妙的HTML结构和CSS选择器来实现的。这种技术不仅提高了用户体验，还为网页设计带来了更多创新的可能性。通过不断...
CSS3实现创意开关切换按钮特效代码
03-20
本资源提供的"CSS3实现创意开关切换按钮特效代码"，正是利用了CSS3的新特性来设计出一种独特的开关切换效果，这种效果在用户界面设计中十分常见，例如用于开启或关闭某些功能、设置选项等。 首先，要理解这个开关...
CSS3红色开关按钮特效
07-24
本教程将详细讲解如何利用CSS3实现一个红色3D立体开关按钮，以及如何添加逼真的切换动画。 首先，我们需要了解CSS3的关键特性在创建此类特效中的应用： 1. **选择器**：CSS3引入了更强大的选择器，如类选择器 `....
css3昼夜开关按钮切换背景特效
07-24
css3昼夜开关按钮切换背景特效是一款点击按钮切换全屏背景，再次点击按钮再次切换背景。
利用CSS3实现开关样式
ma125120的博客
10-28 683
开关组件开关组件有开和关两个状态，所以可以使用checkbox元素来实现。只需使用border-radius,checked选择器,CSS3的过渡动画即可制作一个美观的开关按钮。下图分别为关闭状态的样式和打开状态的样式： 首先，来分析一下这个组件的大概组成部分：分别为底层的圆角矩形框，圆形的指示球。圆角的矩形框的圆角样式就是border-radius的应用，当它的值等于它的高度时，左右的边框就会变
纯css3写的开关切换
04-12
纯css3写的开关切换，无需用javascript实现，需要的小伙伴们赶紧试试吧
制作css开关,6款CSS3制作的开关切换按钮
weixin_35389904的博客
08-03 684
CSS语言：CSSSCSS确定.row {width: 100%;display: block;line-height: 60px;text-align: center;}input[type="checkbox"] {display: none;}input[type="checkbox"] + label {display: inline-block;width: 40px;height: 2...
css3实现switch开关按钮
lily2016n的博客
03-29 4344
纯css实现switch开关按钮<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .mui-switch { width: 52px; height: 31px; position: rela
CSS - 选择器应用（开关式按钮）
小蚂蚁的世界
05-25 1448
开关式按钮与复选框的行为十分相似，可以用来切换某个选项的开关状态：启用时，它是被按下的状态；停用时，它就是浮起的状态。在语义上，开关式按钮和复选框并没有本质上的差别，因此可以放心地使用这个技巧，不用担心语义上有问题。&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset...
html5 css3 滑动按钮,一组精美的纯CSS3滑动开关按钮
weixin_35740545的博客
08-03 1332
这是一组使用CSS3制作的精美滑动开关按钮特效。这组滑动按钮按Bootstrap的情景类来设计，可以适应5种不同的场景，以及一种不可用的状态。使用方法HTML结构该滑动按钮效果的基本HTML结构使用一个元素来包裹一个元素和两个元素。DefaultCSS样式第一个元素.switch-box-slider用于制作滑动按钮的滑动轴。.switch-box .switch-box-slider {posi...
纯CSS3滑动开关按钮
w1366352655的博客
11-29 767
纯CSS3滑动开关按钮 在线演示 本地下载 posted @ 2018-11-29 11:50 栖息地 阅读(...) 评论(...) 编辑 收藏
CSS3左右滑动开关按钮
ICode联盟
12-02 647
下载地址 CSS3左右滑动开关按钮是一款非常酷的CSS3 3D开关按钮，点击按钮可以左右滑动，就像开关打开闭合一样的效果。 dd:
CSS3新增选择器两种方式开关效果实现（剖析实现过程）
u012197150的博客
03-08 186
网上有很多很好看的开关，其实实现的过程大同小异，只是换了一个装扮而已，所以只要掌握开关的核心实现的原理方法，明白了之后也就游刃有余了。 首先我们要实现一个开关的效果的话肯定要分析下如果实现它应该从哪方面开始着手，就如同下面的开关图示一样 没有点击开关的时候，开关的默认状态为左边，点击之后开关跑到了右边，然后背景的颜色也随之改变，所以我们这里就要说到第一种实现的方式，这种方式个人感觉也是比较好理...
html实现选择按钮,通过css3实现开关选择按钮
weixin_36263738的博客
06-04 1659
通过css属性实现如图所示按钮要点：通过checkbox选中与否的状态与兄弟选择器实现相关功能1.设置开关大小并设置定位方式为relative.swift-btn {position: relative;display: inline-block;width: 50px;height: 25px;}2.设置checkbox属性，并设置为不可见状态.swift-btn input[type='che...
使用JavaScript和CSS创建苹果风格开关按钮
该文档介绍了一个使用JavaScript和CSS技术实现的苹果风格开关按钮的特效。通过结合HTML、CSS和JavaScript代码，可以创建出具有视觉吸引力且具有良好兼容性的开关按钮，其在开启和关闭状态时有不同的样式。 在HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值