更改收音机为真时的行为（无需更改HTML结构）

当收音机为真时，我需要在（span class =“ui-radiobutton-icon”）中应用样式的朋友可以帮助我。感谢。更改收音机为真时的行为（无需更改HTML结构）

限制：HTML结构

<div class="ui-radiobutton ui-widget"> 
    <div class="ui-helper-hidden-accessible"> 
     <input type="radio" name="groupname" value="Masculino" ng-reflect-checked="true"> 
    </div> 
    <div ng-reflect-ng-class="[object Object]" class="ui-radiobutton-box ui-widget ui-state-default ui-state-active"> 
     <span class="ui-radiobutton-icon fa fa-fw fa-circle" ng-reflect-klass="ui-radiobutton-icon" ng-reflect-ng-class="[object Object]"></span> 
    </div> 
</div>

来源

2016-09-26 Fellipe J. de Sousa

你需要家长选择要做到这一点，当他们不存在（和你不能改变的标记），将需要的脚本。为什么你不能改变标记？ ...您可以移动实际输入并在其位置使用标签，并且可以在不使用脚本的情况下完成 – LGSon

“ui-radio button”类可以是根...它是第三家公司的组件我正在自定义接口 –

下面是使用你的结构样品，不过与无线移动至ui-radiobutton。

这个工作适合你吗？

input { 
 
    display: none; 
 
} 
 
label { 
 
    display: inline-block; 
 
    width: 16px; 
 
    height: 16px; 
 
    border-radius: 50%; 
 
    border: 3px solid black; 
 
} 
 
input:checked ~ .ui-helper-hidden-accessible label { 
 
    background: gray; 
 
} 
 
input:checked ~ .ui-radiobutton-box .ui-radiobutton-icon { 
 
    color: red; 
 
}

<div class="ui-radiobutton"> 
 
    <input id="ui-radio-hidden" type="radio" name="uir"> 
 
    <div class="ui-helper-hidden-accessible"> 
 
    <label for="ui-radio-hidden"></label> 
 
    </div> 
 
    <div class="ui-radiobutton-box"> 
 
    <span class="ui-radiobutton-icon fa fa-fw fa-circle">Red when checked</span> 
 
    </div> 
 
</div>

来源

2016-09-26 20:11:27 LGSon

不幸的是，我无法更改结构，请参阅我自定义的组件： [www.primefaces.org]（http://www.primefaces.org/primeng/#/radiobutton） –

@FellipeJ。 deSousa然后脚本是你唯一的选择（截至今天至少） – LGSon

更改收音机为真时的行为（无需更改HTML结构）

回答

相关问题