渲染两个纯CSS复杂的复选框的问题

Question

我试图想出一个纯CSS（不使用第三方库）花哨的复选框。只要我必须渲染一个复选框，代码似乎工作正常。但是当我添加第二个复选框时，第二个元素将呈现在第一个元素的顶部。第二个问题涉及标签文本。有什么想法吗？

.checkboxFive {
  position: relative;
}

.checkboxFive input {
  display: none;
}

.checkboxFive label {
  cursor: pointer;
  position: absolute;
  width: 12px;
  height: 12px;
  background: #eee;
  border: 1px solid #ddd;
}

.checkboxFive label:after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 11px;
  height: 4px;
  background: transparent;
  border: 2px solid #333;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

.checkboxFive label:hover::after {
  opacity: 0.5;
}

.checkboxFive input[type=checkbox]:checked + label:after {
  opacity: 1;
}

<div class="checkboxFive">
  <input type="checkbox" value="1" name="" />
  <label for="checkboxFiveInput">Option 1</label>
</div>

<div class="checkboxFive">
  <input type="checkbox" value="1" name="" />
  <label for="checkboxFiveInput">Option 2</label>
</div>

这是一个选项案例所需的效果。

.checkboxFive {
      position: relative;
    }

    .checkboxFive input {
      display: none;
    }

    .checkboxFive label {
      cursor: pointer;
      position: absolute;
      width: 12px;
      height: 12px;
      background: #eee;
      border: 1px solid #ddd;
    }

    .checkboxFive label:after {
      opacity: 0;
      content: '';
      position: absolute;
      width: 11px;
      height: 4px;
      background: transparent;
      border: 2px solid #333;
      border-top: none;
      border-right: none;
      transform: rotate(-45deg);
    }

    .checkboxFive label:hover::after {
      opacity: 0.5;
    }

    .checkboxFive input[type=checkbox]:checked + label:after {
      opacity: 1;
    }

    <div class="checkboxFive">
        <input type="checkbox" value="1" id="checkboxFiveInput" name="" />
		<label for="checkboxFiveInput"></label>
	</div>

Answer 1

问题在于您的父母。你需要提供填充/边距或一定的高度来修复它。

.checkboxFive {
  position: relative;
  padding:10px;
  float:left
}

＆＃13;

＆＃13;

.checkboxFive {
  position: relative;
  padding:10px;
  float:left
}

.checkboxFive input {
  display: none;
}

.checkboxFive label {
  content: '';
  cursor: pointer;
  position: absolute;
  width: 12px;
  height: 12px;
  background: #eee;
  border: 1px solid #ddd;
}

.checkboxFive label:before {
  opacity: 0;
  content: '';
  position: absolute;
  width: 11px;
  height: 4px;
  background: transparent;
  border: 2px solid #333;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

.checkboxFive label:hover::before {
  opacity: 0.5;
}
.checkboxFive input[type=checkbox]:checked + label:before {
  opacity: 1;
}

＆＃13;

<div class="checkboxFive">
  <input type="checkbox" value="1" name="" />
  <label for="checkboxFiveInput"></label>
</div>
<div class="checkboxFive">
  <input type="checkbox" value="2" name="" />
  <label for="checkboxFiveInput"></label>
</div>

＆＃13;

＆＃13;

＆＃13;