在切换按钮右侧添加标签 [英] Add label to right of toggle button
本文介绍了在切换按钮右侧添加标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道如何将标签添加到下方切换按钮的右侧.
I would like to know how can I add the label to the right side of the below toggle.
我尝试添加未正确对齐的标签.
I tried to add label which is not correctly aligned.
感谢任何帮助.
Plunkr 链接 - https://plnkr.co/edit/NdnF2OycDZpk2FiiB7D6?p=preview
Plunkr link - https://plnkr.co/edit/NdnF2OycDZpk2FiiB7D6?p=preview
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.switch {
position: relative;
display: inline-block;
width: 47px;
height: 20px;
}
.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: "";
height: 13px;
width: 13px;
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 {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<label class="switch">
<input type="checkbox" checked>
<div class="slider round"></div>
</label>
</body>
</html>
推荐答案
您可以使用 css (::after) 并使用 position relative 将内容添加到标签中以将其放置到所需位置.
You can add the content into the label using css (::after) and using position relative to place it to the desired location.
.switch {
position: relative;
display: inline-block;
width: 47px;
height: 20px;
}
.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: "";
height: 13px;
width: 13px;
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 {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider::after {
position:relative;
right:-55px;
content: "label"
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<label class="switch">
<input type="checkbox" checked>
<div class="slider round"></div>
</label>
</body>
</html> 这篇关于在切换按钮右侧添加标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
