标签内输入标签的 CSS 样式答案

【问题标题】：CSS styling for input tags inside labels标签内输入标签的 CSS 样式
【发布时间】：2016-07-03 18:47:30
【问题描述】：

我正在使用以下过滤器对列表进行排序：

 <fieldset class="groups">
  <h4 class="cufon_headings">Groups</h4>
  <div class="checkbox">
    <input type="checkbox" value="member1">
    <label>Member 1</label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" value="member2">
      Member 2</label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" value="member3">
      Member 3</label>
  </div>
</fieldset>

这是我用于上述过滤器的 CSS：

/* Checkbox Styles*/
fieldset {
  display: inline-block;
  vertical-align: top;
  margin: 0 1em 0 0;
  background: #fff;
  padding: .5em;
  border-radius: 3px;
}

.checkbox{
  display: block;
  position: relative;
  cursor: pointer;
  margin-bottom: 8px;
}

.checkbox input[type="checkbox"]{
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  margin: 0;
  opacity: 0;
  z-index: 1;
}

.checkbox label{
  display: inline-block;
  vertical-align: top;
  text-align: left;
  padding-left: 2em;
}

.checkbox label:before,
.checkbox label:after{
  content: '';
  display: block;
  position: absolute;
}

.checkbox label:before{
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background: #ddd;
  border-radius: 3px;
}

.checkbox label:after{
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #E50082;
  opacity: 0;
  pointer-events: none;
}

.checkbox input:checked ~ label:after{
  opacity: 1;
}

.checkbox input:focus ~ label:before{
  background: #eee;
}

第一个复选框（成员 1）的样式正确，即选中第一个选项将复选框标记为洋红色。在本例中，标签位于标签之外。

其他 chekcbox 选项（成员 2 和成员 3）在选择它们时不会变成洋红色。与这两个标签都在标签内。

首选的变体是在标签中包含标签。但是，我无法弄清楚如何调整 CSS 以使其正常工作。任何人都可以提供帮助吗？（这里是the code on CopePen的链接）

【问题讨论】：

标签： css input filter label mixitup

【解决方案1】：

<fieldset class="groups">
  <h4 class="cufon_headings">Groups</h4>
  <div class="checkbox">
    <input type="checkbox" value="member1">
    <label>Member 1</label>
  </div>
  <div class="checkbox">

      <input type="checkbox" value="member2">
      <label>Member 2</label>
  </div>
  <div class="checkbox">

      <input type="checkbox" value="member3">
      <label>Member 3</label>
  </div>
</fieldset>

确保您的标签对于成员 2 和 3 是正确的。您的标签标签包括输入标签。上面的代码似乎可以工作。

【讨论】：

【解决方案2】：

查理的回答是正确的。在 CSS 中，您不能影响父母 - 只能影响孩子。

before 和 after 是 puesdo 元素，它们的行为并不完全像普通元素，因此它们不是 input 的兄弟姐妹。

为了解决你的问题，改变每一个：

<div class="checkbox">
    <label>
        <input type="checkbox" value="memberN">
        Member N
    </label>
</div>

进入：

<div class="checkbox">
    <input type="checkbox" value="memberN">
    <label>
        Member N
    </label>
</div>

【讨论】：

【解决方案3】：

感谢您的 cmets。旨在使第一个复选框与其他复选框不同以显示效果。

如果无法使用 CSS，我想我需要调整插件 Contact Form 7 for Wordpress 如何为复选框提供 HTML。不是处理问题的首选方式。

【讨论】：