【发布时间】：2016-05-10 20:08:45
【问题描述】：
我有一个表单，我想在其中使用图像而不是单选按钮。如何显示多个图像，而不是单选按钮。例如 - 带有“男性”和“女性”图像的性别。它应该是功能性的。我想隐藏单选按钮并放置图像。我从堆栈溢出中得到了一个解决方案，这是小提琴：
.cc-selector input{
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
.cc-selector-2 input{
position:absolute;
z-index:999;
}
.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}
.cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
-webkit-filter: none;
-moz-filter: none;
filter: none;
}
.drinkcard-cc{
cursor:pointer;
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
width:100px;height:70px;
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
-webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
-moz-filter: brightness(1.8) grayscale(1) opacity(.7);
filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
-webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
-moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
filter: brightness(1.2) grayscale(.5) opacity(.9);
}
/* Extras */
a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;}
* { font-family:monospace; }
.cc-selector-2 input{ margin: 5px 0 0 12px; }
.cc-selector-2 label{ margin-left: 7px; }
span.cc{ color:#6d84b4 }<form>
<p>Previously:</p>
<div>
<input checked="checked" id="a1" type="radio" name="a" value="visa" />
<label for="a1">Visa</label><br/>
<input id="a2" type="radio" name="a" value="mastercard" />
<label for="a2">Mastercard</label>
</div>
<p>Now, with CSS3: </p>
<div class="cc-selector">
<input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />
<label class="drinkcard-cc visa" for="visa"></label>
<input id="mastercard" type="radio" name="credit-card" value="mastercard" />
<label class="drinkcard-cc mastercard"for="mastercard"></label>
</div>
</form>
<small><a href="https://github.com/rcotrina94/icons">
© Icons by <span class="cc">@rcotrina94</span> on <span class="cc">Github </span></a></small>但是在这里，问题出现了，当我将输入 id 更改为其他名称并且它不起作用时。任何人都可以帮助我，因为这是一个非常简短和简单的方法，我想用这个。您可以将输入 id 更改为“visa1”并查看结果。
【问题讨论】：
-
问题出现了，当我将输入 id 更改为其他名称时，它不起作用。 什么不起作用，为什么需要更改输入id到
visa1?