Silvanassss
@Silvanassss
Front-end

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

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

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


как бы оно поменяло, НО при нажатии на любой из чек-боксов ничего не происходит, я сначала подумала что может просто стилми закрыло галочку, но по нажатию и сабмиту ничего не пашет и пишет ошибку.... Помогите пожалуйста, очень надо!
  • Вопрос задан
  • 1046 просмотров
Решения вопроса 1
Silvanassss
@Silvanassss Автор вопроса
Front-end
Помогло это решение:
Через 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;
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
НО при нажатии на любой из чек-боксов ничего не происходит

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

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

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

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

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

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

https://codepen.io/search/pens?q=checkbox&page=1&o...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы