1
私はCSSでラジオボタンのラジオをカスタマイズしています。私はラベルに背景画像を適用し、元の入力ラジオボタンを隠す。 背景画像がチェックオンまたはオフになっていない理由を知りません。HTMLラジオボタンCSSが動作しない
コード：
.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>
CSSでは、 "上向き"を選択することはできません。つまり、要素の内容に応じてスタイルを設定することはできません。また、CSSルールはセレクタの最後の要素（class、id、...）にのみ適用されます。 – connexo
あなたのセレクタ（ '+'）は、ラベルが入力の後*である場合にのみ機能します。ラベル内の入力では機能しません。例：https://jsfiddle.net/yvcr2cwt/ – Kobi
これは重複しています.. – user5014677