Question

我正在尝试对复选框进行样式化，因此您单击标签而不是具有实际的复选框，但是我无法选择该复选框-标签允许我将鼠标悬停，但是看来我无法与复选框本身进行交互。我想要它，所以当您将鼠标悬停/选中该框（填充区域的1/3）时，它将被选中，并变成白色/绿色，但是当我单击时，似乎没有选中它。我在哪里可以对其进行“检查”？

这就是我要处理的内容（我的实际代码没有最后一个标头放在一边，这很奇怪，因为我没有对原始代码进行任何更改）：

@font-face {
  font-family: Roboto;
  src: url("https://fonts.googleapis.com/css?family=Roboto");
}

* {
  font-family: Roboto;
  text-align: center;
}

input::placeholder {
  text-align: left;
}

body {
  background: #62BF67;
  color: white;
}

input[type="password"],
input[type="text"] {
  border-top: 200px;
  border-left: 2px;
  border-right: 2px;
  border-bottom-color: green;
  width: 70%;
  padding: 15px;
  font-size: 14px;
  outline: 0;
  background: #f2f2f2;
  margin: auto;
}

input[type=checkbox] {
  display: none;
}

form section {
  margin: 0 auto;
}

form section div {
  box-sizing: border-box;
  width: 500px;
  border: 1px #FFF solid;
  margin: 0 auto;
}

form section div:not(#BlockOne) {
  padding: 15px;
}

h3 {
  margin: 0px;
}

.header {
  text-align: center;
  color: white;
}

#BLockOne {
  padding-top: 15px;
  padding-bottom: 0px;
}

#environs {
  margin: 0;
  padding: 0px 0px 10px;
  list-style-type: none;
  width: 100%;
}

label:hover,
label:active,
label:focus,
input:checked {
  background-color: white;
  color: #62BF67;
}

#environs>li>label {
  display: block;
}

#environs>li {
  float: left;
  text-align: center;
  width: calc(100% / 3);
}

<h1>Hello</h1>
<form>
  <section>
    <h3 class="header">Login information</h3>
    <div id="personal">
      <input type="text" id="email" placeholder="Email - first.last@email.com">
      <br><br>
      <input type="password" id="firstpass" placeholder="Password">
    </div>

  </section>

  <section>
    <h3 class="header">One</h3>
    <div id="BlockOne">
      <input type="password" id="secpass" placeholder="Second Password">
      <ul id="environs">
        <li><label for="env1"><input type="checkbox" name="env" id="env1" value="env1">env1</label></li>
        <li><label for="env2"><input type="checkbox" name="env" id="env2" value="env2">env2</label></li>
        <li><label for="env3"><input type="checkbox" name="env" id="env3" value="env3">env3</label></li>
      </ul>
    </div>
  </section>

  <section>
    <h3 class="header">Two</h3>
    <div id="BlockTwo">
      <p>Lorem ipsum</p>
    </div>
  </section>
  <br><br>
  <input type="submit" value="Run">
</form>

编辑：我正在尝试重新创建this

Answer 1

这可能是（或至少部分是）您所追求的。

没有父级CSS选择器，因此您需要像以下所示那样重构HTML，将复选框置于之前

function DisplayInfo($dir){
  $infoLines= file(getPath($dir, "info.txt"));
  echo "<dl>";
  foreach ($infoLines as $line) {
     list($key, $value) = explode(':', $line, 2); 
     echo"<dt>$key</dt>";
     echo"<dd>$value</dd>";
  }
  echo "</dl>";
}

现在您可以使用相邻的同级组合器<input type="checkbox" name="env" id="env1" value="env1"><label for="env1">env1</label>

为标签设置样式。

完整版本：

input:checked + label

@font-face {
  font-family: Roboto;
  src: url("https://fonts.googleapis.com/css?family=Roboto");
}

* {
  font-family: Roboto;
  text-align: center;
}

input::placeholder {
  text-align: left;
}

body {
  background: #62BF67;
  color: white;
}

input[type="password"],
input[type="text"] {
  border-top: 200px;
  border-left: 2px;
  border-right: 2px;
  border-bottom-color: green;
  width: 70%;
  padding: 15px;
  font-size: 14px;
  outline: 0;
  background: #f2f2f2;
  margin: auto;
}

input[type=checkbox] {
  display: none;
}

form section {
  margin: 0 auto;
}

form section div {
  box-sizing: border-box;
  width: 500px;
  border: 1px #FFF solid;
  margin: 0 auto;
}

form section div:not(#BlockOne) {
  padding: 15px;
}

h3 {
  margin: 0px;
}

.header {
  text-align: center;
  color: white;
}

#BLockOne {
  padding-top: 15px;
  padding-bottom: 0px;
}

#environs {
  margin: 0;
  padding: 0px 0px 10px;
  list-style-type: none;
  width: 100%;
}

label:hover,
label:active,
label:focus,
input:checked + label{
  background-color: white;
  color: #62BF67;
}

#environs>li>label {
  display: block;
}

#environs>li {
  float: left;
  text-align: center;
  width: calc(100% / 3);
}

您不能做的就是将复选框设置为仅使用CSS的悬停事件进行检查

Answer 2

我建议您组织好代码。如果要使用字段复选框，则最好创建一个将包含输入和标签的容器，以避免出现任何错误。选择器+检索输入immediately之后的元素，因此，如果字段和标签之间存在另一个元素（例如，跨度），则它将不起作用。然后选择器~得到标签，其后是输入be it immediately or have another element in between。

div.checkbox{
  display: inline-block;
  padding: 0;
  margin: 5px 8px;
}
div.checkbox > input{
  display: none;
}

div.checkbox > label{
  display: block;
  background: #eee;
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: 0 1px 3px 1px rgba(0,0,0,.3);
  cursor: pointer;
  transition: all .5s;
}
div.checkbox > input:checked ~ label{
  background: gray;
  color: #fff;
}

<div>
  <div class="checkbox">
    <input type="checkbox" name="environ" value="env1" id="env1">
    <label for="env1">Chekbox item 1</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" value="env2" id="env2">
    <label for="env2">Chekbox item 2</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" name="environ" value="env3" id="env3">
    <label for="env3">Chekbox item 3</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" name="environ" value="env4" id="env4">
    <label for="env4">Chekbox item 4</label>
  </div>
</div>

我的HTML / CSS不允许我与风格化的复选框互动

2 个答案: