Стилизация checkbox в форме - Конструкторы форм

Здравствуйте! Как мне стилизовать checkbox? Вот здесь: https://cbsystems.ru/raschjot-stoimosti-sajta (если выбрать любой пункт, то появятся чекбоксы)
Хотелось бы их увеличить перекрасить и т.п. Подскажите, пожалуйста.

Вот есть такая конструкция:
/* прячем input checkbox */
input[type="checkbox"] {
  display: none;
}

/* стили для метки */
label {
  color: #000;
  cursor: default;
  font-weight: normal;
  line-height: 30px;
  padding: 10px 0;
  vertical-align: middle;
}

/* формируем внешний вид чекбокса в псевдоэлементе before */
label:before {
  content: " ";
  color: #000;
  display: inline-block;
  font: 20px/30px Arial;
  margin-right: 15px;
  position: relative;
  text-align: center;
  text-indent: 0px;
  width: 30px;
  height: 30px;
  background: #FFF;
  border: 1px solid #e3e3e3;
  border-image: initial;
  vertical-align: middle;
}

/* вариации внешнего вида в зав-ти от статуса checkbox */
/* checked */
input:checked + label:before {
  content: "x";
}
/* disabled */
input:disabled + label:before {
  background: #eee;
  color: #aaa;
}
Но она почему-то не отмечает отмеченный чекбокс. Т.е. это input:checked + label:before {
  content: "x";
} почему-то не работает.

почему-то не работает.

чтоб работало <input> должен быть перед <label>

Вот решение на бутстрапе, но у вас работать не будет, потому что это для 4-й версии. Но можете посмотреть как там сделано:

чтоб работало <input> должен быть перед <label>

Код

<div>
   <input...>
   <label...>
</div>

Вот решение на бутстрапе, но у вас работать не будет, потому что это для 4-й версии. Но можете посмотреть как там сделано:

Спойлер

[свернуть]

Спасибо за совет, но я не силен в php))). Как тут поменять их местами (input и label)? Вот код формы:
  if ($pos) {
            $html .= '<label class="qf3label qfempty"></label>';
        } else {
            $html .= $this->getLabel($field, $rand, 'qf3label qfbefore');
        }

        $html .= '<div class="qfchkbx"><input class="checkbox" id="' . $rand . '" type="checkbox" name="chbx"' . $this->attr(array('class', 'custom', 'checked', 'required'), $field);

Вот так, вероятно...

Вот так, вероятно...

Код

          $html .= '<div class="qfchkbx"><input class="checkbox" id="' . $rand . '" type="checkbox" name="chbx"' . $this->attr(array('class', 'custom', 'checked', 'required'), $field);

  if ($pos) {
            $html .= '<label class="qf3label qfempty"></label>';
        } else {
            $html .= $this->getLabel($field, $rand, 'qf3label qfbefore');
        }

Спасибо. Но так не работает.

Тему можно закрывать, в форме присутствовал измененный чекбокс - он красивый и удобный в отличие от оригинального. Так, что решение не понадобилось.