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">
    <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 以使其正常工作。任何人都可以提供帮助吗？（这是CopePen 上代码的链接）

4

3 回答 3

0

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

beforeandafter是 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>
于 2016-07-03T19:08:47.330 回答
0 
<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 是正确的。您的标签标签包括输入标签。上面的代码似乎有效。

于 2016-07-03T18:52:07.427 回答
0

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

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

于 2016-07-06T07:16:53.220 回答