Hello. There are components on the page SelectOneRadio from the library of Primefaces http://www.primefaces.org/showcase/ui/input/oneRadio.xhtml It is rendered in such HTML, there is a CSS that makes this whole thing into the look I need. Only now I can not understand how you can make the color on the blue button white? Can I do without changing DOM and 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:&quot;safeWalkForm:zoneRadio&quot;,e:&quot;change&quot;,p:&quot;safeWalkForm:zoneRadio&quot;,u:&quot;safeWalkForm&quot;,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:&quot;safeWalkForm:zoneRadio&quot;,e:&quot;change&quot;,p:&quot;safeWalkForm:zoneRadio&quot;,u:&quot;safeWalkForm&quot;,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>

  • If the use of p:ajax not considered a change in DOM or JS (although this is exactly what p: ajax will do, and both), then there is one option. OneButton component still exists primefaces.org/showcase/ui/input/oneButton.xhtml Maybe you’re more lucky with it - Sergey

1 answer 1

They finally came to the fact that they rewrote the render component.