标签内的HTML标记未显示

Question

我有一个 UI 元素，当不在 label 标签内时会显示，但当我将其放在标签内或在其前面添加标签时，它就不会显示了，我做错了什么吗？

如您所见，第一个 div 只显示文本，第二个 div 只显示图形，我希望拥有带有文本的切换按钮位于右侧。

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

- David

---

我认为你示例中可见的输入是标签元素内部的输入。我错了吗？ - conventi

@RahulTripathi：他没有这样做。他只是在label标签内部放置了一个input，这是完全合法的。 - Martha

@David，通过你的编辑，这段代码开始变得更加清晰易懂了。请再进行一次编辑，确保你没有重复的ID（除非这就是你代码的问题所在，因为ID需要唯一）。 - Joseph Marikle

Answer 1

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

第一个问题的原因： 您添加了position:absolute。因此，两者从同一位置开始。因此，一个会隐藏另一个。

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

第二个问题的原因：

您将显示块设置为标签和输入，并将绝对位置设置为两者。

- Gibbs

---

但是我不想显示复选框，我想要旁边带有文本的切换按钮。 - David

Answer 2

你能做这样的事情吗？

我把文本“设置新密码”放在一个自己的

中，并对其应用了margin-left和width，以使其显示在切换图像的右侧。

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

.instructions {
    margin-left: 100px;
    width: 100px;  
}

<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">
    <div class="instructions">
      Set new password
    </div> 
  </label>
</div>

- indubitablee

---

嗯，这看起来很有趣，我必须检查哪个解决方案是最好的，但我认为这个解决方案看起来不错！ - David

谢谢您的回答，但我没有接受这个答案，因为我的想法是使用标签，这样点击文本也会触发切换。 - David

@大卫，啊，抱歉，你原贴只是提到标签没有显示在开关的右边，并没有提及开关功能本身。 - indubitablee

Answer 3

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

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

- arc

---

你给了我正确的提示，因为我正在为第一个标签设置样式，所以我应该使用第二个标签来设置文本。请执行以下操作以接受您的答案：删除 display: flex; align-items: center;。 - David

并将vertical-align:middle;添加到.password-toggle + label中，同时将50%更改为原始的80%。这样，您将获得文本真正位于切换按钮旁边。 - David

@David 很好，抱歉我的回答比较简短。是的，使用vertical-align更好。此外，我没有提到，我还将按钮的宽度从80px改为了78px。在我看来，这样看起来更好一些。 - arc