1
我想在圖像中用作單選按鈕。這按預期工作。但是我發現的代碼是在圖像處於活動狀態時對其應用邊框。我不希望活動圖像被綠色勾號「✓」覆蓋。我真的不知道該怎麼做。謝謝你的幫助。在我的代碼框下面。如何將文本添加到作爲單選按鈕工作的圖像？
HTML：
<fieldset id="theme" style="margin:0; padding:0; border:none;">
<div style="margin-top:10px;">
<figure style="float:left; margin:0;">
<label id="styleinput">
<input type="radio" name="theme" value="defaultlayout"/>
<img src="./static/images/darklayout.png" style="max-width:170px; margin-right:20px;"/>
<figcaption id="caption" style="margin-left:10px; font-size:12px;"><b>Default</b><br><a>Preview</a></figcaption>
</label>
</figure>
<figure style="float:left; margin:0;">
<label id="styleinput">
<input type="radio" name="theme" value="defaultlayout"/>
<img src="./static/images/lightlayout.png" style="max-width:170px; margin-right:20px;"/>
<figcaption id="caption" style="margin-left:10px; font-size:12px;"><b>Light</b><br><a>Preview</a></figcaption>
</label>
</figure>
</div>
</fieldset>
CSS：
#styleinput > input{ /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}
#styleinput > input + img{ /* IMAGE STYLES */
cursor:pointer;
border:2px solid transparent;
}
#styleinput > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
border:2px solid #f00;
}
https://jsfiddle.net/k4a71tnt/
怎麼是這樣的：https://jsfiddle.net/k4a71tnt/5/ – UncaughtTypeError
它已經做了:) – UncaughtTypeError