切换按钮使用纯 css [英] Toggle button Using pure css
问题描述
我有一个切换按钮,我正在尝试使用复选框和纯 css.我试图得到的最终结果是这样的https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch
I have a toggle button which I am trying using a checkbox and pure css. The end result I am trying to get is something like this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch
但是在从不同来源尝试之后,我最终做了这样的事情
But on trying it from different sources I ended up doing it something like this
http://jsfiddle.net/8wb570ma/34/
.slide-btn-alt .slide-btn-content .slide-btn-handle {
position: static;
width: 50%;
border-radius: 0;
background: none;
text-align: center;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
我面临的问题是我无法翻译方向,我在 w3schools 上检查的内容显示打开/选中左侧的文本和右侧的滑块,而关闭/未选中右侧的文本和左侧的滑块.而我最终所做的却表现出完全相反的行为.
The problem I am facing is that I am not able to translate the direction, What I checked on the w3schools shows On/checked with text on left and slider on right whereas Off/unChecked with text on right and slider on left. Whereas what I ended up making shows entirely opposite behavior.
这是因为我的按钮像吗?
Is this because my button is like?
关闭||手柄||开启
推荐答案
如果我正确理解您想要什么,那么您可以使用 W3Schools 方法的一个轻微变体.
If I understand correctly what you want, then you can do with a slight variant of the W3Schools method.
为了说明发生了什么,这里是一个与原始版本相比改动最小的基本版本:
To show what's going on, here is a bare-bones version with minimal changes from the original:
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: attr(data-off);
line-height:26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
content: attr(data-on);
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
<label class="switch">
<input type="checkbox">
<span class="slider" data-off="Off" data-on="On"></span>
</label>
并使用更多 CSS 使其看起来更像您的示例:
And with some more CSS to make it look more like your example:
.slide-btn-alt {
position: relative;
display: inline-block;
width: 108px;
height: 34px;
}
.slide-btn-alt input {display:none;}
.slide-btn-content {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #2b99d6;
text-transform:uppercase;
-webkit-transition: .3s;
transition: .3s;
}
.slide-btn-content::before {
position: absolute;
content: attr(data-off);
font: 900 10px/34px 'Montserrat-Bold', sans-serif;
color: white;
width: 50%;
left: 0;
bottom: 0;
text-align: center;
-webkit-transition: .3s;
transition: .3s;
}
.slide-btn-content::after {
position: absolute; content: '';
height: 34px;
left: 49%;
bottom: 0;
border-left: 2px solid rgba(238, 238, 239, 0.2);
}
input:checked + .slide-btn-content {
background-color: #485679;
}
input:focus + .slide-btn-content {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slide-btn-content::before {
content: attr(data-on);
-webkit-transform: translateX(54px);
-ms-transform: translateX(54px);
transform: translateX(54px);
}
<label class="slide-btn-alt">
<input type="checkbox">
<span class="slide-btn-content" data-off="Off" data-on="On"></span>
</label>
这篇关于切换按钮使用纯 css的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!