单击时更改标签输入，然后在单击不同图像时返回原始输入？

Question

所以我使用复选框来更改单击时的 3 个按钮，当有人单击一个按钮时，它会更改为选定的按钮图像，然后有人单击另一个按钮，它将另一个按钮更改回原始图像，并且新的其他点击按钮转到选择。问题是我无法弄清楚如何拥有 3 个不同的选定状态。每种颜色一个。现在它显然只是使用greenbtn-selected，我如何添加多个以便每个按钮都有自己的选择状态？

由于某种原因 content:url 不能在 Firefox 上运行？还有其他方法吗，我尝试了 background:url 但这在 Chrome 中不起作用！呃。

非常感谢！！！

选中的按钮图片..

http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png
http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png
http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png

按钮..

<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png">
</label>

<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png">
</label>

<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png">
</label>

CSS...

label > input + img {
    cursor: pointer;
}
label > input {
    position: absolute;
    visibility: hidden;
    width: 130px;
}
label > input:checked + img {
    content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png");
}

label > input + img {
  cursor: pointer;
}
label > input {
  position: absolute;
  visibility: hidden;
  width: 130px;
}
label > input: checked + img {
  content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png");
}

<label>
  <input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
  <img src="http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png">
</label>

<label>
  <input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
  <img src="http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png">
</label>

<label>
  <input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
  <img src="http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png">
</label>

Answer 1

不要使用image 使用<div> 或span

JS Fiddle

提供背景图片并在更改图片之前使用pseudo

html

<label>
    <input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
    <span class="check-green"></span>
</label>

css

.check-green {
    background:url(http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png);
    width:124px;
    height:30px;
}

label > input:checked + span:before {
    content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png");
    display:block;
}

Answer 2

您可以使用 Javascript 并为每个按钮注册一个点击事件。像这样的东西；

jQuery

$('button1').click(function(){
   //do necessary changes
});