html - 用文本替换输入单选

Question

我想用文本替换“输入无线电”，并且它在选择时会改变颜色。默认颜色为白色#FFFFFF，但单击时，它会更改为#627CA9，但没有可见的“无线电输入”。我希望“输入单选”的圆圈变为“显示：无”，但保留文本，当用户单击时，该文本会改变颜色，从而表明“输入单选”已被单击不知道能不能做到这一点！预先感谢您的帮助！（对不起我的英语）<label><input type="radio" name="poll_option" class="poll_option" value="CHVRCHES">CHVRCHES</label>

Answer 1

这是你想要的吗？我使用 jQuery 隐藏单选按钮并在单击单选按钮时更改标签的颜色。

function changeInput(input) {

  $(input).hide();

  $(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() {

  $('.poll_option').hide();

});

function changeInput(input) {

  $(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>

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

  <span>CHVRCHES</span>

</label>

和

.label input[type="radio"] {

  position: absolute;

  left: -9999px;

}

.label input[type="radio"]:checked+span {

  color: #627CA9;

}