更改收音机为真时的行为(无需更改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>
答
下面是使用你的结构样品,不过与无线移动至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>
+0
不幸的是,我无法更改结构,请参阅我自定义的组件: [www.primefaces.org](http://www.primefaces.org/primeng/#/radiobutton) –
+0
@FellipeJ。 deSousa然后脚本是你唯一的选择(截至今天至少) – LGSon
你需要家长选择要做到这一点,当他们不存在(和你不能改变的标记),将需要的脚本。为什么你不能改变标记? ...您可以移动实际输入并在其位置使用标签,并且可以在不使用脚本的情况下完成 – LGSon
“ui-radio button”类可以是根...它是第三家公司的组件我正在自定义接口 –