Стилизация checkbox в форме

Lemonez

Захожу иногда
225
2 / 2

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

Записан

Lemonez

Захожу иногда
225
2 / 2

Re: Стилизация checkbox в форме

« Ответ #1 : 09.10.2019, 22:37:47 »

Вот есть такая конструкция:
/* прячем 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";
} почему-то не работает.

Записан

sivers

Живу я здесь
2604
361 / 0

Re: Стилизация checkbox в форме

« Ответ #2 : 09.10.2019, 22:46:04 »

Цитата: Lemonez от 09.10.2019, 22:37:47

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

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

Код

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

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

Спойлер

[свернуть]

Записан

На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/

Lemonez

Захожу иногда
225
2 / 2

Re: Стилизация checkbox в форме

« Ответ #3 : 09.10.2019, 22:58:40 »

Цитата: sivers от 09.10.2019, 22:46:04

чтоб работало <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);

Записан

sivers

Живу я здесь
2604
361 / 0

Re: Стилизация checkbox в форме

« Ответ #4 : 09.10.2019, 23:08:37 »

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

Код

          $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');
        }

Записан

На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/

Lemonez

Захожу иногда
225
2 / 2

Re: Стилизация checkbox в форме

« Ответ #5 : 10.10.2019, 00:11:10 »

Цитата: sivers от 09.10.2019, 23:08:37

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

Код

          $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');
        }

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

Записан

Lemonez

Захожу иногда
225
2 / 2

Re: Стилизация checkbox в форме

« Ответ #6 : 10.10.2019, 00:12:19 »

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

Записан

По форме FOXCONTACT ! Автор aleminov	Ответов: 0 Просмотров: 1489	16.10.2014, 14:42:30 от aleminov
Заставить в FormCalc работать checkbox Автор Phoenix-ann	Ответов: 2 Просмотров: 2000	12.10.2013, 21:21:18 от kozhenevsky
Прикрепление файла в форме? Автор uniqcle	Ответов: 1 Просмотров: 2527	04.03.2010, 00:21:48 от ZyX

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

Новости Joomla

🏆 Открыто голосование за Joomla в премии CMS Critic People’s Choice Awards 2025

👩‍💻 Релиз JoomGallery 4.3.0 - компонент галереи изображений для Joomla.

👩‍💻 Вместе мы развиваем Joomla: станьте Joomfluencer!

Lemonez

Стилизация checkbox в форме

Lemonez

Re: Стилизация checkbox в форме

sivers

Re: Стилизация checkbox в форме

Lemonez

Re: Стилизация checkbox в форме

sivers

Re: Стилизация checkbox в форме

Lemonez

Re: Стилизация checkbox в форме

Lemonez

Re: Стилизация checkbox в форме

Похожие темы