Мой HTML / CSS не позволяет мне взаимодействовать со своими стилизованными флажками

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>

Редактировать: я пытался воссоздать это

Answer 1

Я предлагаю вам хорошо организовать свой код.Если вы хотите работать с флажком поля, было бы предпочтительнее создать контейнер, который будет принимать ввод и метку, чтобы избежать любой ошибки.Селектор + извлекает элемент, который следует за вводом 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>

Answer 2

Это может быть, или, по крайней мере, частично, то, что вам нужно.

Нет родительского селектора CSS, поэтому вам нужно немного изменить рефакторинг, как показано ниже, поставив флажок до метка

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

<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><input type="checkbox" name="env" id="env1" value="env1"><label for="env1">env1</label></li>
        <li><input type="checkbox" name="env" id="env2" value="env2"><label for="env2">env2</label></li>
        <li><input type="checkbox" name="env" id="env3" value="env3"><label for="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>

То, что вы не можете сделать, это установить флажок для проверки, используя событие наведения мыши только с CSS