CSS Пользовательские флажки в сетке - нельзя удалить исходный флажок

Question

У меня есть несколько флажков в сетке, и я хочу использовать vanilla- css и html, чтобы сделать настраиваемый флажок. Это нормально работает. Проблема заключается в том, что оставшееся поле исходного флажка остается в моей сетке и заставляет его вести себя странным образом, так как он занимает ячейку. Даже когда я делаю его прозрачным или деактивирую, как это часто предлагают.

В исходном примере они переместили его из области экрана, но я могу заставить его выйти за пределы сетки.

Я думаю, что это та часть, где он не ведет себя так, как я хочу:

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

Вот минимальный пример: https://jsfiddle.net/3mzsLj1v/14/

Вот пример Я использовал: https://css-tricks.com/the-checkbox-hack/

Вот настоящий код, над которым я работаю: https://codepen.io/vaeng/pen/XWXKoMb

Спасибо за вашу помощь. Я уверен, что это очень часто, но, будучи новичком, я мог бы неправильно использовать css?

Answer 1

Видите ли, ваши элементы label и input находятся на одном уровне, и даже с position: absolute; ваш input все еще является частью сетки. Заменил ваш input внутри label, добавил span элемент и переписал CSS.

Хотя в вашем коде было

* New Checkboxes*/

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

Первый комментарий был закрыт неверно, поэтому следующая инструкция не сработала.

.body {
  height: 100%;
}

.outer-box {
  display: grid;
  margin: auto;
  background-color: green;
  width: 300px;
  align-self: center;
  grid-gap: 10px;
}

.inner-box {
  display: grid;
  width: 80%;
  background-color: red;
  align-self: center;
  margin: 5px 5px 5px 5px;
}


/* New Checkboxes*/


/* Base for label styling */

[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

[type="checkbox"]:not(:checked)+span,
[type="checkbox"]:checked+span {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}


/* checkbox aspect */

[type="checkbox"]:not(:checked)+span:before,
[type="checkbox"]:checked+span:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1em;
  height: 1em;
  border: 1px solid grey;
  background: transparent;
}


/* checked mark aspect */

[type="checkbox"]:not(:checked)+span:after,
[type="checkbox"]:checked+span:after {
  content: '\2713\0020';
  position: absolute;
  top: .05em;
  left: .2em;
  font-size: 1.3em;
  line-height: 0.8;
  color: whitesmoke;
  transition: all .2s;
  font-family: Arial;
}


/* checked mark aspect changes */

[type="checkbox"]:not(:checked)+span:after {
  opacity: 0;
  transform: scale(0);
}

[type="checkbox"]:checked+span:after {
  opacity: 1;
  transform: scale(1);
}

<div class="outer-box">
  <div class="inner-box">
    Some text
  </div>
  <div class="inner-box">
    <label for="box1" class="container">
      <input type="checkbox" id="box1"><span>Selectbox1</span>
    </label>
    <label for="box2" class="container">
      <input type="checkbox" id="box2"><span>Selectbox2</span>    
    </label>
  </div>
</div>

И, пожалуйста, не используйте display: grid; для каждого элемента. Это очень специфичная настройка c только для случаев, когда вам действительно нужно использовать grid.

Answer 2

В обоих примерах «минимального» и «реального кода» ваши комментарии «Новые флажки» не открываются должным образом.

В минимальном примере: Строка 23: *New Checkboxes*/ s / b /*New Checkboxes*/

В реальном примере кода: Строка 123: * New Checkboxes and radio buttons*/ s / b /* New Checkboxes and radio buttons*/

Если вы исправите эти строки, ваш код должен работать должным образом.

Кроме того, я заметил в строке 102, что вы ставите // перед visibility: hidden;. Если вы хотите прокомментировать эту строку, этот синтаксис недопустим в CSS.