单击css时更改单选按钮的图像

Question

我按照stackoverflow上的提示创建了一个单选按钮css，但是缺少一些细节。

它打印出一个红色方块而不是默认的单选按钮图标，但是当我点击它时，没有任何反应。

有代码： 在for循环中我有：

$radioprint[$j] .= '<div class="radio"><div><input type="radio" name="radio'.$j.'" value="'.$radioarr[$j][$r].'">
<label for="radio'.$j.'"></label>'.$radioarr[$j][$r].'</div></div>';

我调整了css：

input[type=radio]{display:none;}
label {
width: 14px;height: 14px;display: inline-block;background-color: red;cursor: pointer;
}
input[type=radio]:checked + label {
width: 14px;height: 14px;display: inline-block;background-color: green;cursor: pointer;
}

Answer 1

尝试使用CSS只是为了使其工作（使用3个无线电进行测试，你可以从循环中进行）。

<强> HTML：

<input class="rb" value="1" id="a1" type="radio" name="myradio" checked="checked">
<label for="a1" class="radio_label"><div class="new_button"></div><span class="whitespan"> Radio 1</span></label><br />

<input class="rb" value="2" id="a2" type="radio" name="myradio">
<label for="a2" class="radio_label"><div class="new_button"></div><span class="whitespan"> Radio 2</span></label><br />

<input class="rb" value="3" id="a3" type="radio" name="myradio">
<label for="a3" class="radio_label"><div class="new_button"></div><span class="whitespan"> Radio 3</span></label>

<强> CSS：

.rb { display:none }
.new_button {width:15px; display:inline-block}
.whitespan { background-color: white }
.radio_label { background-color:red; cursor: pointer }
input[type=radio]:checked+label { background-color: green }

好的，让我解释一下这是如何工作的。隐藏了3个隐藏的 display:none 风格的隐藏按钮。每个单选按钮的标签包含 div 元素（用于模拟圆圈的自定义绘制）和课程文本。我已将文字放在 span 对中，并将其背景更改为白色（或您想要的任何背景颜色）。

点击label后，您可以更改整个标签的背景颜色，但文字的白色背景会使其在视觉上不受影响。这意味着您只需更改文本前面的内联div的尺寸即可更改标签的彩色区域。由于div被放置在label对内，因此您也可以通过点击彩色方块获得相同的点击效果。

实际上，使用标签的width样式属性，您可以定义彩色块的宽度。要更改高度，您可能需要处理margins，padding，font-size，或者甚至通过制作更复杂的nested div元素结构。

老实说，这是我第一次尝试制作这样的东西。从未使用过我生活中类似的东西。所以它肯定不是完美的解决方案，但至少要考虑它并尝试使某些东西可以满足您的需求。

希望你能用它。