我有一个 UI 元素,当它不在 label 标签内时显示,当我将它放在标签内或在它不显示之前添加标签时,我做错了什么?
如您所见,第一个 div 仅显示文本,而第二个 div 仅显示图形,我希望右侧带有文本的 toogle 按钮。
#passwordToggleContainer {
width: 80%;
margin: 0 auto 1em auto;
}
.password-toggle {
position: absolute;
visibility: hidden; /* Hides the standard checkbox. */
}
.password-toggle + label {
display: block;
position: relative;
cursor: pointer;
padding: 2px;
width: 80px;
height: 40px;
background-color: #dddddd;
border-radius: 40px;
margin: 0 auto;
}
.password-toggle + label:before,
.password-toggle + label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: "";
}
.password-toggle + label:before {
right: 1px;
background-color: #f1f1f1;
border-radius: 40px;
-moz-transition: background 0.4s;
-o-transition: background 0.4s;
-webkit-transition: background 0.4s;
transition: background 0.4s;
}
.password-toggle + label:after {
width: 40px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-moz-transition: margin 0.4s;
-o-transition: margin 0.4s;
-webkit-transition: margin 0.4s;
transition: margin 0.4s;
}
.password-toggle:checked + label:before {
background-color: #66B650;
}
.password-toggle:checked + label:after {
margin-left: 40px;
}
<div id="passwordToggleContainer">
<label>
<input id="setPasswordToggle" class="password-toggle" type="checkbox">
Set new password
</label>
</div>
<div id="passwordToggleContainer">
<input id="setPasswordToggle" class="password-toggle" type="checkbox">
<label for="setPasswordToggle">Set new password</label>
</div>
最佳答案
您可以添加第二个标签,因为您正在为第一个标签设置样式。
#passwordToggleContainer {
width: 80%;
margin: 0 auto 1em auto;
}
.password-toggle {
position: absolute;
visibility: hidden; /* Hides the standard checkbox. */
}
.password-toggle + label {
display: inline-block;
vertical-align:middle;
position: relative;
cursor: pointer;
padding: 2px;
width: 78px;
height: 40px;
background-color: #dddddd;
border-radius: 40px;
margin: 0 auto;
}
.password-toggle + label:before,
.password-toggle + label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: "";
}
.password-toggle + label:before {
right: 1px;
background-color: #f1f1f1;
border-radius: 40px;
-moz-transition: background 0.4s;
-o-transition: background 0.4s;
-webkit-transition: background 0.4s;
transition: background 0.4s;
}
.password-toggle + label:after {
width: 40px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-moz-transition: margin 0.4s;
-o-transition: margin 0.4s;
-webkit-transition: margin 0.4s;
transition: margin 0.4s;
}
.password-toggle:checked + label:before {
background-color: #66B650;
}
.password-toggle:checked + label:after {
margin-left: 40px;
}
<div id="passwordToggleContainer">
<input id="setPasswordToggle" class="password-toggle" type="checkbox">
<label for="setPasswordToggle"></label>
<label for="setPasswordToggle">Set new password</label>
</div>
关于标签内的 HTML 标签未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36310546/