自定义CSS到单选按钮标签

Question

我需要为标签后面的选中/活动单选按钮添加自定义样式。

我可以将按钮的边框和宽度设置得很好，只是不能为选中/活动按钮设置背景颜色。由于输入标签在div之外，我似乎无法管理它。

我不能搞乱下面的代码，只能改变CSS。

有人可以帮我吗？

<label class="radio-inline display-block col-sm-3" for="concern" style="color: rgb(102, 102, 102);">
<span class="has-pretty-child">
    <div class="clearfix prettyradio labelright  blue has-pretty-child">
        <input class="radio the_input_element" name="runway_surface" id="concern" value="Concern" style="display: block !important; color: rgb(50, 55, 60);" autocomplete="off" type="radio">
        <a class="checked fa fa-check ui-state-active" style="color: rgb(0, 163, 201);"></a>
    </div>
    <span class="input-label radio-label" style="color: rgb(102, 102, 102);">Concern</span>
</span>

这样的事情：

Answer 1

要设置复选框或单选按钮的样式，您需要隐藏实际输入并将另一个元素设置为您需要的样式。有关如何执行此操作的教程，请参阅此w3schools页面：https://www.w3schools.com/howto/howto_css_custom_checkbox.asp