customowy checked input radio

pytanie zadane 17 kwietnia 2021 w HTML i CSS przez Rafał Termoaktywny Początkujący (400 p.)

<label class="label_radio_yes ">
<input type="radio" name="profile" value="1" class="radio_input radio_yes " checked="checked">Tak</label>

.label_radio_yes {
	position: relative;
}

.label_radio_yes::after {
	border: 2px solid rgb(1 32 52);
	background: rgb(10 48 88);
	position: absolute;
	top: 1px;
	left: 3px;
	margin-right: 0px;
	display: inline-block;
	width: 16px;
	height: 16px;
	content: '';
}

.label_radio_yes input[type="radio"]:checked + .label_radio_yes:after {
    content: '\f00c';
}

Dlaczego gdy checbox jest zaznaczony content aftera nie ulega zmianie?

2 odpowiedzi

odpowiedź 17 kwietnia 2021 przez Comandeer Guru (601,590 p.)

Bo label jest rodzicem inputa w kodzie i selektor go nie łapie. Szukasz bowiem labela, który jest za inputem. Jakbyś miał te elementy oddzielne (input a zanim label) byłoby Ci to latwiej ostylować.

komentarz 17 kwietnia 2021 przez Rafał Termoaktywny Początkujący (400 p.)

Nie mam mozliwosci zmiany, tak silnik mybb generuje kod

komentarz 17 kwietnia 2021 przez Comandeer Guru (601,590 p.)

A musi być CSS? W JS-ie dałoby się to prosto zrobić, ale w CSS-ie de facto się nie da. W Chrome można dać co prawda ::after na sam input, ale nie działa to w Firefoksie.

odpowiedź 17 kwietnia 2021 przez VBService Ekspert (253,420 p.)

A możesz dodać element html przed Tak

<label class="label_radio_yes">
  <input type="radio" name="profile" value="1" class="radio_input radio_yes">
  <span class="radio"></span>Tak
</label>

<label class="label_radio_yes">
  <input type="radio" name="profile" value="1" class="radio_input radio_yes">
  <span class="radio"></span>Tak
</label>
<label class="label_radio_yes">
  <input type="radio" name="profile" value="0" class="radio_input radio_yes">
  <span class="radio"></span>Nie
</label>

.label_radio_yes {
  position: relative;
}
.label_radio_yes input[name="profile"] {
  display: none;
}

.label_radio_yes .radio::after {
  border: 2px solid rgb(1,32,52);
  background: rgba(10,48,88, 0.2);
  margin-right: 5px;
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 12px;
  content: '';
}

.label_radio_yes input[name="profile"]:checked + .radio::after {
  content: '\f00c';
}