Здравствуйте. Есть на странице компонент SelectOneRadio из библиотеки Primefaces http://www.primefaces.org/showcase/ui/input/oneRadio.xhtml Он рендерится в такой HTML, есть CSS который все это дело оформляет в нужный мне вид. Только вот не могу понять как можно сделать цвет на синей кнопке белым? Можно ли обойтись без изменения DOM и JS?
.zone_selector {
display: table;
width: 100%;
position: relative;
}
.zone_selector .ui-radiobutton {
position: absolute;
width: 50%;
height: 100%;
margin: 0;
padding: 0;
z-index: 1;
}
.zone_selector .ui-radiobutton-box {
width: 100%;
height: 100%;
}
.zone_selector .ui-radiobutton-icon {
background-image: none;
background-color: #fff;
display: block;
width: 100%;
height: 100%;
}
.zone_selector .ui-state-active .ui-radiobutton-icon {
background-color: #0085ca;
color: #fff;
}
.zone_selector label {
display: table-cell;
width: 50%;
text-align: center;
padding: 8px;
border: 1px solid #0085ca;
position: relative;
z-index: 2;
}
.zone_selector .ui-radiobutton:first-of-type .ui-radiobutton-icon,
.zone_selector label:first-of-type {
border-radius: 100px 0 0 100px;
border-right: 0px;
}
.zone_selector .ui-radiobutton:last-of-type .ui-radiobutton-icon,
.zone_selector label:last-of-type {
border-radius: 0 100px 100px 0;
border-left: 0px;
}
.ui-helper-hidden-accessible {
display: none;
}
<div id="safeWalkForm:j_idt153" class="ui-outputpanel ui-widget zone_selector">
<!-- Первая кнопка -->
<div id="safeWalkForm:circle" class="ui-radiobutton ui-widget">
<div class="ui-helper-hidden-accessible">
<input id="safeWalkForm:zoneRadio:0_clone" name="safeWalkForm:zoneRadio" type="radio" class="ui-radio-clone" data-itemindex="0" onchange="PrimeFaces.ab({s:"safeWalkForm:zoneRadio",e:"change",p:"safeWalkForm:zoneRadio",u:"safeWalkForm",onco:function(xhr,status,args){changedZoneType();;}});"
value="CIRCLE">
</div>
<div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default"><span class="ui-radiobutton-icon ui-icon ui-icon-blank ui-c"></span>
</div>
</div>
<label for="safeWalkForm:circle">Автоматически</label>
<!-- Вторая кнопка -->
<div id="safeWalkForm:polygon" class="ui-radiobutton ui-widget">
<div class="ui-helper-hidden-accessible">
<input id="safeWalkForm:zoneRadio:1_clone" name="safeWalkForm:zoneRadio" type="radio" class="ui-radio-clone" data-itemindex="1" onchange="PrimeFaces.ab({s:"safeWalkForm:zoneRadio",e:"change",p:"safeWalkForm:zoneRadio",u:"safeWalkForm",onco:function(xhr,status,args){changedZoneType();;}});"
value="POLYGON">
</div>
<div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default ui-state-active"><span class="ui-radiobutton-icon ui-icon ui-c ui-icon-bullet"></span>
</div>
</div>
<label for="safeWalkForm:polygon">Нарисовать</label>
</div>
p:ajax
не считается изменением DOM или JS (хотя именно это и будет делать p:ajax, причём и то и другое), то есть один вариант. Еще есть компонентOneButton
primefaces.org/showcase/ui/input/oneButton.xhtml Может с ним больше повезёт