Как сделать так, чтобы переключатели включались / выключались с помощью css

Question

У меня есть требование переключателей с методом вкл. / Выкл., Т. Е. При нажатии на один переключатель он должен включаться, а при нажатии второй кнопки первая кнопка должна отключаться, но приведенный ниже код не работает, как я ожидал.

Вот фрагмент кода HTML и CSS:

body {
  background: #0288D1;
}

.checkboxes-and-radios {
  margin: 80px auto 0;
  width: 280px;
  padding: 30px;
  background: #fafafa;
  input {
    display: none;
  }
  label {
    cursor: pointer;
    padding-right: 35px;
    position: relative;
    display: block;
    font-size: 18px;
    padding: 15px 0
  }
  input[type="checkbox"],
  input[type="radio"] {
    position: absolute;
    visibility: hidden !important;
  }
  input[type="checkbox"]+label,
  input[type="radio"]+label {
    &:before,
    &:after {
      content: '';
      position: absolute;
      top: 50%;
      margin-top: -7.5px;
      box-sizing: border-box;
    }
    &:before {
      width: 30px;
      height: 15px;
      right: 0px;
      background: #fff;
      border: 1px solid #e4e3e1;
      border-radius: 15px;
    }
    &:after {
      width: 15px;
      height: 15px;
      right: 15px;
      background: #BDBDBD;
      border-radius: 50%;
      transition: all 200ms ease-out;
    }
  }
  input[type="checkbox"]:checked+label,
  input[type="radio"]:checked+label {
    &:after {
      right: 0px;
      background: #FF9800;
    }
  }
}

<div class="checkboxes-and-radios">
  <h1>Radios:</h1>
  <input type="radio" name="radio-cats" id="radio-1" value="1" checked>
  <label for="radio-1">Radio Label 1</label>
  <input type="radio" name="radio-cats" id="radio-2" value="2">
  <label for="radio-2">Radio Label 2</label>
  <input type="radio" name="radio-cats" id="radio-3" value="3" checked>
  <label for="radio-3">Radio Label 3</label>
  <h1>Checkboxes:</h1>
  <input type="checkbox" name="checkbox-cats[]" id="checkbox-1" value="1" checked>
  <label for="checkbox-1">Checkbox Label 1</label>
  <input type="checkbox" name="checkbox-cats[]" id="checkbox-2" value="2">
  <label for="checkbox-2">Checkbox Label 2</label>
  <input type="checkbox" name="checkbox-cats[]" id="checkbox-3" value="3" checked>
  <label for="checkbox-3">Checkbox Label 3</label>
</div>

ожидаемый результат:

Answer 1

Ваш код работает для меня как шарм.В предоставленной скрипте SCSS не был скомпилирован в CSS.Здесь скомпилированная версия.Переключатели переключаются правильно.

Здесь также версия на CodePen .

Ваш CSS - не CSS, а SCSS, который должен быть скомпилирован в CSS.

Вы должны использовать препроцессор для компиляции scss в css.Вы должны начать читать здесь: http://sass -lang.com

body {
  background: #0288D1;
}

.checkboxes-and-radios {
  margin: 80px auto 0;
  width: 280px;
  padding: 30px;
  background: #fafafa;
}

.checkboxes-and-radios input {
  display: none;
}

.checkboxes-and-radios label {
  cursor: pointer;
  padding-right: 35px;
  position: relative;
  display: block;
  font-size: 18px;
  padding: 15px 0;
}

.checkboxes-and-radios input[type="checkbox"],
.checkboxes-and-radios input[type="radio"] {
  position: absolute;
  visibility: hidden !important;
}

.checkboxes-and-radios input[type="checkbox"]+label:before,
.checkboxes-and-radios input[type="checkbox"]+label:after,
.checkboxes-and-radios input[type="radio"]+label:before,
.checkboxes-and-radios input[type="radio"]+label:after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -7.5px;
  box-sizing: border-box;
}

.checkboxes-and-radios input[type="checkbox"]+label:before,
.checkboxes-and-radios input[type="radio"]+label:before {
  width: 30px;
  height: 15px;
  right: 0px;
  background: #fff;
  border: 1px solid #e4e3e1;
  border-radius: 15px;
}

.checkboxes-and-radios input[type="checkbox"]+label:after,
.checkboxes-and-radios input[type="radio"]+label:after {
  width: 15px;
  height: 15px;
  right: 15px;
  background: #BDBDBD;
  border-radius: 50%;
  transition: all 200ms ease-out;
}

.checkboxes-and-radios input[type="checkbox"]:checked+label:after,
.checkboxes-and-radios input[type="radio"]:checked+label:after {
  right: 0px;
  background: #FF9800;
}

<div class="checkboxes-and-radios">
  <h1>Radios:</h1>
  <input type="radio" name="radio-cats" id="radio-1" value="1" checked>
  <label for="radio-1">Radio Label 1</label>
  <input type="radio" name="radio-cats" id="radio-2" value="2">
  <label for="radio-2">Radio Label 2</label>
  <input type="radio" name="radio-cats" id="radio-3" value="3" checked>
  <label for="radio-3">Radio Label 3</label>
  <h1>Checkboxes:</h1>
  <input type="checkbox" name="checkbox-cats1" id="checkbox-1" value="1" checked>
  <label for="checkbox-1">Checkbox Label 1</label>
  <input type="checkbox" name="checkbox-cats2" id="checkbox-2" value="2">
  <label for="checkbox-2">Checkbox Label 2</label>
  <input type="checkbox" name="checkbox-cats3" id="checkbox-3" value="3" checked>
  <label for="checkbox-3">Checkbox Label 3</label>
</div>