Как заменить одну картинку другой в чекбоксе через css

@кристина34 · Регистрация: 12.08.2019

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

Хочу сделать так, чтобы при нажатии на картинку-чекбокс (она изначально серого и белого цветов) оно становилась оранжево белой(заменялась на другую картинку)...
когда чекбоксы имеют картинку оранжево-белого цвета - значит, что чекбокс выбран, выделен пользователем
если серо-белого - то пассивен, не выбран пользователем

хотелось бы решение без js
+уже много гуглила разного, но под мою ситуацию ничего не нашла: именно, чтобы картинка одного цвета на другой цвет и при этом оставалась чекбоксом!!! Название: Screenshot_23.png
Просмотров: 46

Размер: 5.0 Кб

Название: Screenshot_23.png
Просмотров: 46

Размер: 5.0 Кб

@shvyrevvg · 21.08.2019, 16:56

Сообщение от кристина34

Хочу сделать так, чтобы при нажатии на картинку-чекбокс (она изначально серого и белого цветов) оно становилась оранжево белой(заменялась на другую картинку)...

Легко гуглится что-то вроде "custom checkbox", заворачиваете сам чекбокс в label и скрываете, картинку вешаете на div/span или вставляете svg, меняете по :checked цвета или background-image.

Добавлено через 8 минут
Как-то так

HTML5
1
2
3
4
5
<label class="checkbox">
  <input type="checkbox" class="checkbox__input">
  <span class="checkbox__face"></span>
  text
</label>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.checkbox {
  cursor: pointer;
}
.checkbox__input:focus + .checkbox__face {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.checkbox__face {
  display: inline-block;
  height: 10px;
  width: 10px;
  background-color: blue;
}
.checkbox__input:checked + .checkbox__face {
  background-color: red;
}
.checkbox__input {
  position: absolute;
  opacity: 0;
}

@кристина34 · 21.08.2019, 18:36 **[ТС]**

спасибо
но я нашла решение которые намного короче
<input type="checkbox" id="phonecall" name="connectiontype">
<label id="one" for="phonecall">По телефону</label>

input[type="checkbox"]{
display: none;
}
label{
padding-left: 20px;
}
#one:before{
content: url(img/phone_01p.png);
vertical-align: middle;
display: inline-block;
margin-left: -10px;
margin-right: 10px;
}
input[type="checkbox"]:checked + #one:before{
content: url(img/phone_01a.png);
}

@AlexZaw · 21.08.2019, 22:17

Не по теме:

Сообщение от кристина34

но я нашла решение которые намного короче

Ну и чем оно короче? Да еще и намного :)

@novichek_1905 · 22.08.2019, 01:27

кристина34,

HTML5
1
2
3
4
<label>
  <input hidden type="checkbox">
  <b>По телефону</b>
</label>

CSS
1
2
3
4
5
6
7
8
9
10
label b {
  display: inline-flex;
  align-items: center;
  font: bold 16px/24px Arial;
  padding: 10px 40px;
  background: url(https://tinypng.com/web/output/a5j3kg6crb2wu61tzy5qwktp4f9ku0p1/1.png) no-repeat left center;
}
label input:checked ~ b {
  background: url(https://tinypng.com/web/output/vdt8du1kgfbp5mp49wgc3cn8m7tgrj7y/2.png) no-repeat left center;
}

Не по теме:

уж короче не придумать...

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@кристина34 1 / 1 / 1 Регистрация: 12.08.2019 Сообщений: 46

	Как заменить одну картинку другой в чекбоксе через css 21.08.2019, 16:23. Показов 4762. Ответов 4 Метки checkbox, css (Все метки) Хочу сделать так, чтобы при нажатии на картинку-чекбокс (она изначально серого и белого цветов) оно становилась оранжево белой(заменялась на другую картинку)... когда чекбоксы имеют картинку оранжево-белого цвета - значит, что чекбокс выбран, выделен пользователем если серо-белого - то пассивен, не выбран пользователем хотелось бы решение без js +уже много гуглила разного, но под мою ситуацию ничего не нашла: именно, чтобы картинка одного цвета на другой цвет и при этом оставалась чекбоксом!!! 0

@кристина34 1 / 1 / 1 Регистрация: 12.08.2019 Сообщений: 46
	21.08.2019, 18:36 [ТС]
	спасибо но я нашла решение которые намного короче <input type="checkbox" id="phonecall" name="connectiontype"> <label id="one" for="phonecall">По телефону</label> input[type="checkbox"]{ display: none; } label{ padding-left: 20px; } #one:before{ content: url(img/phone_01p.png); vertical-align: middle; display: inline-block; margin-left: -10px; margin-right: 10px; } input[type="checkbox"]:checked + #one:before{ content: url(img/phone_01a.png); } 0