Как правильно отредактировать внешний вид чек-боксов в Contact Form 7?

Question

[Tanya]

Добрый день! Столкнулась с очень неприятно ситуацией, никак не могу отредактировать чек-боксы, точнее уже отредактировала, вроде выглядят как мне надо, но не работают... Никак не могу найти правильное решение, ничего не помогает, код следующий:

span.wpcf7-list-item {
    display: block !important;
 }
 
 
 input[type="submit"] {
    border: none;
    -webkit-border-radius: 47px;
    -moz-border-radius: 47px;
    border-radius: 47px;
    font: 20px bebas-neue-by-fontfabric, sans-serif;
    font-weight: 400;
    padding: 10px 30px;
    text-align: center;
    font-size: 30px;
    color: #fff !important;
    background: #ffbd38;
}
 
 
 
 .wpcf7-checkbox, .radio {
  display: inline;
  margin: 10px 0 0;
     
 }

  .wpcf7-list-item {
    display: inline-block;
}
    input[type=checkbox], input[type=radio] {
      display: none;
}
      .wpcf7-list-item::checked + .wpcf7-list-item-label::before {
        content: "\f0c8";
        color: rgb(151, 55, 199);
        line-height: 14px;
        text-decoration: inherit;
        text-align: center;
      }

  .wpcf7-list-item-label {
    display: inline-block;
    left: 15px;
    line-height: 14px;
    margin: 0 0 15px;
    position: relative;
  }

    .wpcf7-list-item-label::before {
      background: white;
      border: 1px solid rgb(151, 55, 199);
      border-radius: 3px;
      content: "";
      height: 15px;
      left: -22px;
      position: absolute;
      width: 15px;
    }

    .wpcf7-list-item-label:hover {
      cursor: pointer;
    }

span.wpcf7-list-item-label:checked {
    content: "\2714";
}

input[type="checkbox"]:checked + label:before {
  background: transparent;
  color: #333;
  content: "\2713";
  text-align: center;
}

как бы оно поменяло, НО при нажатии на любой из чек-боксов ничего не происходит, я сначала подумала что может просто стилми закрыло галочку, но по нажатию и сабмиту ничего не пашет и пишет ошибку.... Помогите пожалуйста, очень надо!

Answer 1

[Tanya]

Помогло это решение:
Через label или input(без приставок), либо span и псевдо-классы after, before не помогло
Если у вас такая же проблема как была у меня, то есть у вас в теме/шаблоне стили для чек-боксов не прописаны и вы пользуетесь CF7 то вам это точно поможет. Просто подставите свои значения. input[type=checkbox] - стандартный класс для всех чекбоксов стандартных :)

input[type=checkbox] {
    padding-left:5px;
    padding-right:5px;

    -webkit-appearance:button;

    border: double 2px rgb(151, 55, 199);

    background-color:transparent;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=checkbox]:checked {
    background-color: rgb(151, 55, 199);
    border-radius: 45px;
}

input[type=checkbox]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

Answer 2

[Максим Тимофеев]

НО при нажатии на любой из чек-боксов ничего не происходит

а с чего оно должно происходить что-то? У Вас на input стоит display: none; так что клик по нему сделать не получится и js обработчика видимо нет или он не верный. За счет чего по Вашему должен происходить выбор чекбокса?

НО при нажатии на любой из чек-боксов

нет, Вы нажимаете не на чекбоксы, в на спан.

может просто стилми закрыло галочку,

нельзя закрыто то чего нет

Как правильно отредактировать внешний вид чек-боксов

https://codepen.io/search/pens?q=checkbox&page=1&o...

Comments

[Tanya]

Спасибо большое за ответ! Просто плагин СF7 стоит, я думала оно в любом случае должно обрабатывать по нажатию
практически в каждом из этих примеров принцип один и тот же, они прячуть чек бокс стандартный и делают новый, но работать оно не работает....

[Максим Тимофеев]

Tanya,

они прячуть чек бокс стандартный и делают новый

да, но как прячут? Они его делают прозрачным, а Вы удалили его из документа. Есть разница между "покрасить стену" и "снести стену".

Просто плагин СF7 стоит, я думала оно в любом случае должно обрабатывать по нажатию

как? Магия? Вы удаляете элементы, а плагин чинит? Это искусственный интеллект нужен, а не плагин.

[Tanya]

Максим Тимофеев, то есть display: none; это не просто прячет а можно сказать "удаляет"?

[Максим Тимофеев]

Tanya, конечно. Почитайте доки:
https://developer.mozilla.org/ru/docs/Web/CSS/disp...

[Tanya]

Максим Тимофеев, оу, спасибо! что-то не углублялась в значение, всегда думала что прячет просто... а в коде который я кинула можно это подаравить чтоб работало? я взяла .styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it

с примеров что вы кидали и подставила свой класс, но так оно тоже не работает

извините, если задаю глупые вопросы, я еще пока теряюсь в этом всем)

[Максим Тимофеев]

Tanya,
ничего не понял. Но по сути для начала надо убрать

input[type=checkbox], input[type=radio] {
      display: none;
}

[Tanya]

Максим Тимофеев, появляются старые чек боксы рядом со стилизоваными

[Максим Тимофеев]

Tanya, Так и должно быть. Иначе как по ним кликнуть. Надо их скрыть. Я же дал примеры, просто повторите. Там куча вариантов. В том числе сделать их просто прозрачными.

[Tanya]

Максим Тимофеев, не помогает что-то ничего из вариантов, cf7 немного специфический... спасибо