自定义 CSS 到单选按钮标签答案

【问题标题】：Custom CSS to radio button labels自定义 CSS 到单选按钮标签
【发布时间】：2018-11-05 22:43:51
【问题描述】：

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

我可以很好地获得按钮的边框和宽度，只是不能为选中/活动按钮设置背景颜色。由于输入标签在 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>

类似这样的：

【问题讨论】：

你是什么意思，标签后面的选中/活动单选按钮？您能确定您提供的代码中需要设置样式的元素吗？
嗨。是的 radio-inline 或其他 input-label 元素.....但只是在它处于活动状态时......

标签： css

【解决方案1】：

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

【讨论】：

谢谢。我已经隐藏了输入。理想情况下，我想在标签类中设置radio-inline 的样式，或者在跨度类中设置input-label 的样式，但我无法仅对选中/活动的样式执行此操作。如果 checked fa fa-check ui-state-active 类不在 div 中，我可以，但作为它的另一个级别，我无法让它工作......。
原来我在看这样的东西：.radio-inline input[type="radio"]:checked+span { background: #59b8cd; } 但跨度要高一级......
抱歉，我不确定我是否理解您目前的问题？您无法设置“span.radio-label”的样式？
嗨，对不起，这里是一个新手，我尽力解释它:) 是的，无法设置“label.radio-inline”或“span.radio-label”的样式......只有当输入处于活动状态/已检查......任何一个都可以满足我的需要......
....或者当 a.class 有 checked fa fa-check ui-state-active - 当单选按钮被取消选择时，这将更改为 ui-state-default .....