css - 单选按钮 - 选中时更改 Action /符号

Question

我正在为产品使用重力形式。我已经成功删除了单选按钮(因为我想将图像用作按钮)。

表示已选择内容的唯一方法是将文本加粗。

这还不够明显。

这是 site

我可以添加绿色 TICK 或以某种方式为所选图像添加边框吗？

这就是我的意思 Screenshot

Answer 1

您的问题相当含糊，因为我们没有太多关于最终结果的信息。但是，我已经做过很多次了，下面是如何完成的:

label {
  cursor: pointer;
  } /* Change cursor when the label is hovered */

input[type=radio] {
  display: none;
  } /* Hide the ugly default radio styling */

label > span {
  display: none;
  } /* Hide the checkmark by default */

input[type=radio]:checked + span{
display: inline;
  color: green;
  } /* Show the checkmark when the radio is checked */

<label><input type="radio" name="obvious"><span>✓</span> I'm rather obvious.</label><br/>
<label><input type="radio" name="obvious"><span>✓</span> I'm rather obvious.</label><br/>
<label><input type="radio" name="obvious"><span>✓</span> I'm rather obvious.</label><br/>
<label><input type="radio" name="obvious"><span>✓</span> I'm rather obvious.</label>

希望对您有所帮助。如果您还需要什么，请在下方评论。