switch-btn

最新推荐文章于 2024-08-15 23:24:36 发布

丑丑丫

最新推荐文章于 2024-08-15 23:24:36 发布

阅读量712

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/coder_girl/article/details/72639553

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<style>
/*选择开关盒子*/
.el-switch {
display: inline-block;
position: relative;
font-size: 14px;
line-height: 22px;
height: 22px;
vertical-align: middle
}
/*选择开关盒子输入框*/
.el-switch__input {
display: none
}
/*label*/
.el-switch__label {
transition: .2s;
width: 46px;
height: 22px;
left: 0;
top: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.el-switch__label,.el-switch__label * {
position: absolute;
display: inline-block;
font-size: 14px
}
.el-switch__label * {
line-height: 1;
top: 4px;
color: #fff
}
/*长色块*/
.el-switch__core {
margin: 0;
display: inline-block;
position: relative;
/* width: 46px;*/
width: 58px;
height: 22px;
border: 1px solid #bfcbd9;
outline: none;
border-radius: 12px;
box-sizing: border-box;
background: #bfcbd9;
cursor: pointer;
transition: border-color .3s,background-color .3s
}
/* 长色块上的按钮*/
.el-switch__core .el-switch__button {
top: 0;
left: 0;
position: absolute;
border-radius: 100%;
transition: transform .3s;
width: 18px;
height: 18px;
background-color: #fff
}
/*左边的文字*/
.el-switch--wide .el-switch__label.el-switch__label--left span {
left: 10px;
width: 58px;
}
/*右边的文字*/
.el-switch--wide .el-switch__label.el-switch__label--right span {
right: 10px;
width: 58px;
}

</style>
</head>
<body>


<div class="box">
<input type="checkbox" class="switch-btn" id="J_check_box" placeholder="弹幕">
<span></span>
</div>
<div class="source">
<label class="el-switch el-tooltip el-switch--wide">

<input type="checkbox" name="" class="el-switch__input">

<span class="el-switch__core" >

<span class="el-switch__button" ></span>
</span>

<div class="el-switch__label el-switch__label--left" style="display: none;">
<span>弹幕</span>
</div>
<div class="el-switch__label el-switch__label--right" >
<span>弹幕</span>
</div>
</label>
</div>
</html>