Изменение стиля у checkbox

@_marisha · Регистрация: 29.05.2011

Студворк — интернет-сервис помощи студентам

Доброго времени суток!
Необходимо у чекбокса изменить фон, убрать скругление углов.
Данный вариант не применяется

CSS
1
2
3
4
input[type="checkbox"] {
  border: 1px solid #f00;
  background: #f00;
}

Чекбоксы формируются на основании кода:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
default://CHECKBOXES
                                ?>
                                <div style="max-height: 450px; overflow:hidden; overflow-y: auto;"> <!--Скрытие списка за пределами указанной высоты-->
                                <?foreach($arItem["VALUES"] as $val => $ar):?>
                                    <label data-role="label_<?=$ar["CONTROL_ID"]?>" class="bx_filter_param_label <? echo $ar["DISABLED"] ? 'disabled': '' ?>" for="<? echo $ar["CONTROL_ID"] ?>">
                                        <span class="bx_filter_input_checkbox">
                                                <input
                                                    type="checkbox"
                                                    value="<? echo $ar["HTML_VALUE"] ?>"
                                                    name="<? echo $ar["CONTROL_NAME"] ?>"
                                                    id="<? echo $ar["CONTROL_ID"] ?>"
                                                    <? echo $ar["CHECKED"]? 'checked="checked"': '' ?>
                                                    onclick="smartFilter.click(this)"
                                                />
                                            <span class="bx_filter_param_text" title="<?=$ar["VALUE"];?>"><?=$ar["VALUE"];?><?
                                            if ($arParams["DISPLAY_ELEMENT_COUNT"] !== "N" && isset($ar["ELEMENT_COUNT"])):
                                                ?> (<span data-role="count_<?=$ar["CONTROL_ID"]?>"><? echo $ar["ELEMENT_COUNT"]; ?></span>)<?
                                            endif;?></span>
                                        </span>
                                    </label>
                                <?endforeach;?>
                                </div>

Подскажите, пожалуйста, каким образом на основании данного кода произвести стилизацию чекбокса. Спасибо.

Добавлено через 3 часа 25 минут
Найдена статья. Но в данном случае при клике на чекбокс знак "X" не отображается

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* прячем 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;
}

@aj17 · 11.05.2018, 11:58

_marisha, логика такая, сам чекбокс вы должны скрыть, а вместо него сверстать свой собственный, когда по label отрабатывает клик, скрытому чекбоксу будет присвоено checked, а это значит что вы можете изменять стиль вашего сверстаного чекбокса в зависимости от того, нажат он или нет.

Пример:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
 
    body {
      font-family: Arial;
    }
 
    /*размер чекбокса*/
 
    .checker-size {
      font-size: 16px;
    }
 
    /*цвет чекбокса неактивного*/
 
    .checker-color {
      color: #ccc;
    }
 
    /*цвет чекбокса активного*/
 
    .checker-active-color:checked~.checker-color {
      color: #017eec;
    }
 
    .checker-pseudo-input {
      display: block;
      width: 1em;
      height: 1em;
      border: .0625em solid currentColor;
      border-radius: .125em;
      transition: border-color .2s ease-in, box-shadow .2s ease-in;
      position: relative;
      float: left;
    }
 
    .checker-input:checked~.checker-pseudo-input {
      border: .0625em solid currentColor;
      box-shadow: 0 0 .125em currentColor;
    }
 
    .checker-pseudo-input:after {
      content: ' ';
      width: .6em;
      height: .6em;
      display: block;
      border-radius: .125em;
      transform: scale(0);
      opacity: 0;
      transition: transform .2s ease-in, opacity .2s ease-in;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
 
    .checker-input:checked~.checker-pseudo-input:after {
      background-color: #017eec;
      transform: scale(1);
      opacity: 1;
    }
 
    .checker-label {
      display: block;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
      line-height: 1em;
      padding: .5em;
    }
 
    .checker-label:hover .checker-input:not(:checked)~.checker-pseudo-input {
      border-color: #000;
    }
 
    .checker-text {
      font-weight: bold;
      font-size: 16px;
      margin-left: 1.5em;
      display: block;
 
    }
 
  </style>
</head>
 
<body>
  <label class="checker-label checker-size" for="sone-id">
    <input class="checker-input checker-active-color" hidden id="sone-id" type="checkbox">
    <span class="checker-pseudo-input checker-color"></span>
    <span class="checker-text">Жмяккни меня</span>
  </label>
</body>
 
</html>

@_marisha · 11.05.2018, 12:34 **[ТС]**

Доброго времени суток!
Как вариант, можно сделать так:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
input[type="checkbox"]:after {
    content: '';
    background: #fff;
    position: absolute;
    width: 10px;
    height: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #5e5e5e;
}
input[type="checkbox"]:checked:after {
    content: '';
    background: #259e82;
    border: 2px solid #259e82;
    position: absolute;
    width: 10px;
    height: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Получается вроде не плохо (скрин "Чекбокс")

@_marisha · 11.05.2018, 12:44 **[ТС]**

aj17, спасибо что откликнулись )
Вариант с зеленым чекбоксом отправлен на проверку, если с точки зрения дизайна не подойдет, то придется думать в сторону приведенного Вами примера

Интересно, почему в мозиле стиль чекбокса не применяется?

(скрин "Мозила")

@aj17 · 11.05.2018, 13:13

Сообщение от _marisha

почему в мозиле стиль чекбокса не применяется

потому что способ выше не корректен, и работать будет только в хроме)

@_marisha · 11.05.2018, 13:59 **[ТС]**

aj17, подскажите, пожалуйста, возможно ли скорректировать данные стили таким образом, чтобы применялись для остальных браузеров?
Ваш вариант примера применяется во всех браузерах?

@aj17 · 11.05.2018, 14:52

Сообщение от _marisha

Ваш вариант примера применяется во всех браузерах?

Да

Сообщение от _marisha

озможно ли скорректировать данные стили таким образом

Одних стилей будет не достаточно, нужно и подверстать:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .checkbox-item {
      display: block;
      font: bold 16px/24px Arial;
      padding-left: 20px;
      position: relative;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
      cursor: pointer;
    }
 
    .checkbox-item .checker {
      content: '';
      background: #fff;
      position: absolute;
      width: 10px;
      height: 10px;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      border: 2px solid #5e5e5e;
      display: block;
    }
 
    .checkbox-item input[type="checkbox"]:checked~.checker {
      content: '';
      background: #259e82;
      border: 2px solid #259e82;
      position: absolute;
    }
 
  </style>
</head>
 
<body>
  <label class="checkbox-item">
    <input hidden type="checkbox">
    <span class="checker"></span>
    кликни
  </label>
 
</body>
 
</html>

Новые блоги и статьи Все статьи Все блоги /
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .

@_marisha 11 / 11 / 2 Регистрация: 29.05.2011 Сообщений: 533
	11.05.2018, 12:44 [ТС]
	aj17, спасибо что откликнулись ) Вариант с зеленым чекбоксом отправлен на проверку, если с точки зрения дизайна не подойдет, то придется думать в сторону приведенного Вами примера Интересно, почему в мозиле стиль чекбокса не применяется? (скрин "Мозила") Изображения 0

@_marisha 11 / 11 / 2 Регистрация: 29.05.2011 Сообщений: 533
	11.05.2018, 13:59 [ТС]
	aj17, подскажите, пожалуйста, возможно ли скорректировать данные стили таким образом, чтобы применялись для остальных браузеров? Ваш вариант примера применяется во всех браузерах? 0