html - 用文本替换输入单选

Question

我想用文本替换“输入无线电”，并且它在选择时会改变颜色。

默认颜色为白色#FFFFFF，但单击时，它会更改为#627CA9，但没有可见的“无线电输入”。

我希望“输入单选”的圆圈变为“显示：无”，但保留文本，当用户单击时，该文本会改变颜色，从而表明“输入单选”已被单击

不知道能不能做到这一点！预先感谢您的帮助！（对不起我的英语）

<label><input type="radio" name="poll_option" class="poll_option" value="CHVRCHES">CHVRCHES</label>

Answer 1

这是你想要的吗？我使用 jQuery 隐藏单选按钮并在单击单选按钮时更改标签的颜色。function changeInput(input) {&nbsp; $(input).hide();&nbsp; $(input).parent().css('color', '#627CA9');}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><label><input type="radio" onclick="changeInput(this);" name="poll_option" class="poll_option" value="CHVRCHES">CHVRCHES</label>如果您希望单选按钮从一开始就隐藏：$(function() {&nbsp; $('.poll_option').hide();});function changeInput(input) {&nbsp; $(input).parent().css('color', '#627CA9');}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><label><input type="radio" onclick="changeInput(this);" name="poll_option" class="poll_option" value="CHVRCHES">CHVRCHES</label>

Answer 2

我认为这可能会有所帮助，只是需要一些额外的跨度：<label>&nbsp; <input type="radio" name="poll_option" class="poll_option"value="CHVRCHES">&nbsp; <span>CHVRCHES</span></label>和.label input[type="radio"] {&nbsp; position: absolute;&nbsp; left: -9999px;}.label input[type="radio"]:checked+span {&nbsp; color: #627CA9;}