标签内的 HTML 标签未显示

Question

我有一个 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>

Answer 1

您可以添加第二个标签，因为您正在为第一个标签设置样式。

#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>