Изменить фон метки, когда действует как флажок

Question

У меня есть ярлыки с вложенными изображениями, которые выполняют функцию флажка.Чего я не могу понять, так это как изменить фон за изображением, когда установлен этот флажок (метка нажата).

Похоже, что один из флажков заставляет фон отображаться, но неи элемент высоты не работает.

Кто-нибудь видит, что я делаю неправильно?

.notificationImgs {
	width: 70px;
	height: auto;
	margin: 0 20px;
	cursor: pointer;
}
.notifCheck {
	display: none;
}
.notifCheck:checked + label {
	background: #CCC;
}
.notifCheck:checked .notificationImgs {
	background-color: #CCC;
	width: 100%;
	height: 70px;
}

<label for="checkText">
			<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Text Notifications" class="notificationImgs">
		</label>
		<input type="checkbox" name="checkText" class="notifCheck" id="checkText" value="text">
		<label for="checkEmail">
			<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Email Notifications" class="notificationImgs">
		</label>

Answer 1

Не добавлен фон на правильной этикетке из-за порядка input и label. Поставьте связанный input (который является скрытым флажком) перед соответствующим ярлыком. Так что .notifCheck:checked + label может найти правильный label. Также вы можете добавить display:inline-block ко всем label стилям. Так что это решит проблему высоты.

См. Фрагмент ниже:

.notificationImgs {
	width: 70px;
	height: auto;
	margin: 0 20px;
	cursor: pointer;
}
.notifCheck {
	display: none;
}
label{
  display:inline-block;
  padding:10px;
}
.notifCheck:checked + label {
	background: #CCC;
}
.notifCheck:checked .notificationImgs {
	background-color: #CCC;
	width: 100%;
	height: 70px;
}

<input type="checkbox" name="checkText" class="notifCheck" id="checkText" value="text">
<label for="checkText">
  <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Text Notifications" class="notificationImgs">
</label>
<input type="checkbox" name="checkEmail" class="notifCheck" id="checkEmail" value="text">
<label for="checkEmail">
  <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Email Notifications" class="notificationImgs">
</label>

Answer 2

Метка должна стоять после флажка в вашем случае.

label{
	display:inline-block;
    padding:10px;
    background: #eee;
}
.notificationImgs {
	width: 70px;
	height: auto;
	margin: 0 20px;
	cursor: pointer;
}
.notifCheck {
	display: none;
}
.notifCheck:checked + label {
	background: #aaa;
}
.notifCheck:checked .notificationImgs {
	background-color: #aaa;
	width: 100%;
	height: 70px;
}

<input type="checkbox" name="checkText" class="notifCheck" id="checkText" value="text">
<label for="checkText">
  <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Text Notifications" class="notificationImgs">
</label>

<input type="checkbox" name="checkEmail" class="notifCheck" id="checkEmail" value="text">
<label for="checkEmail">
  <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Email Notifications" class="notificationImgs">
</label>

Answer 3

Вот измененный HTML / код для вас.У вас не было флажка, и ваш CSS является селектором +, который ищет флажок +, поэтому для первого флажка он был нацелен на второй ярлык.

.notificationImgs {
  width: 70px;
  height: 70px;
  margin: 0 20px;
  cursor: pointer;
}

.notifCheck {
  display: none;
}

.notifCheck:checked+label {
  background: #CCC;
}

.notifCheck:checked .notificationImgs {
  background-color: #CCC;
  width: 100%;
  height: 70px;
}

label{
  display:inline-block;
}

<input type="checkbox" name="checkText" class="notifCheck" id="checkText" value="text">
<label for="checkText">
  <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Text Notifications" class="notificationImgs"/>
</label>

<input type="checkbox" name="checkText" class="notifCheck" id="checkEmail" value="text">
<label for="checkEmail">
  <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Email Notifications" class="notificationImgs"/>
</label>

Answer 4

В вашем примере кода присутствует только один вход для флажка.Вторая метка указывает, что вы, скорее всего, намеревались включить второй флажок ввода с идентификатором # checkEmail.

Пробел (селектор потомков) выбирает только все элементы, которые являются «потомками указанного элемента».Таким образом, .notifCheck:checked .notificationImgs не вычисляется, потому что notificationImgs не является потомком notifCheck.

«+» (соседний селектор) выбирает только те элементы, которые являются смежными.Таким образом, notifCheck:checked + label выбирает только 2-й элемент метки, так как этот элемент следует сразу за элементом .notifCheck.