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