1
Ich passe die Radios der Optionsfelder mit CSS an. Ich habe ein Hintergrundbild auf die Beschriftung angewendet und die ursprünglichen Optionsfelder ausgeblendet. Ich weiß nicht, warum sich das Hintergrundbild beim Aktivieren und Deaktivieren nicht ändert.HTML-Optionsfelder CSS funktioniert nicht
Code:
.frm-radio input[type="radio"] {
display: none;
}
.frm-radio::before {
cursor: pointer;
display: inline-block;
height: 16px;
width: 16px;
overflow: hidden;
content: "";
background-image: url("data:image/svg+xml,%0A%3Csvg%20fill%3D%22%23262626%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.42%200-8-3.58-8-8s3.58-8%208-8%208%203.58%208%208-3.58%208-8%208z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-size: 16px 16px;
}
.frm-radio input[type="radio"]:checked+.frm-radio::before {
background-image: url("data:image/svg+xml,%0A%3Csvg%20fill%3D%22%23262626%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M12%207c-2.76%200-5%202.24-5%205s2.24%205%205%205%205-2.24%205-5-2.24-5-5-5zm0-5C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.42%200-8-3.58-8-8s3.58-8%208-8%208%203.58%208%208-3.58%208-8%208z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E");
}<label class="frm-radio" for="radio"><input type="radio" name="ok" id="radio"> Radio</label>
<label class="frm-radio" for="radio2"><input type="radio" name="ok" id="radio2"> Radio</label>
In CSS können Sie nicht "nach oben" auswählen, was bedeutet, dass Sie ein Element nicht abhängig vom Inhalt des Elements (was Sie versuchen möchten) zu stylen. Außerdem gelten CSS-Regeln nur für das letzte Element (Klasse, ID, ...) im Selektor. – connexo
Ihr Selektor ('+') funktioniert nur, wenn das Label * nach * dem Eingang ist. Es funktioniert nicht mit der Eingabe innerhalb des Etiketts. Beispiel: https://jsfiddle.net/yvcr2cwt/ – Kobi
Wie ist das ein Duplikat .. – user5014677