使用css单击时更改单选按钮的图像答案

【问题标题】：Change image of radio button when clicked with css使用css单击时更改单选按钮的图像
【发布时间】：2014-06-03 10:24:42
【问题描述】：

我按照 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;
}

【问题讨论】：

标签： php css radio-button

【解决方案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 }

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

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

实际上，通过标签的width style-property，您可以定义彩色块的宽度。要更改高度，您可能必须处理margins、padding、font-size，甚至通过制作更复杂的 div 元素的nested 结构。

老实说，这是我第一次尝试做这样的事情。在我的生活中从未使用过类似的东西。所以这当然不是完美的解决方案，但至少考虑一下并尝试制作一些可用的东西来满足您的需求。

希望你可以使用它。

【讨论】：