Question

我正在使用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>

Answer 1

您需要更改输入的位置，以便根据radiobutton的状态选择标签：

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;
}

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");
}

<input type="radio" name="ok" id="radio"><label class="frm-radio" for="radio"> Radio</label>
<input type="radio" name="ok" id="radio2"><label class="frm-radio" for="radio2"> Radio</label>

HTML Radio按钮CSS不起作用

1 个答案: