Hello. There are html and css. It is necessary to select the color of the selected button with White (label element). Cannot use js. A div with the ui-radiobutton-box class, depending on the button selection, puts / removes the ui-state-active class. Nothing else changes, there is no access to the DOM, there is no access to the JS.

/*UI-ONEBUTTON*/ .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>

  • Надо Выделить цвет выбранной кнопки Белым for more details please - Vasily Barbashev
  • apply the css color property: #fff to the label element depending on the presence / absence of the ui-state-active class of the <div class = "ui-radiobutton-box ui-widget ui-corner-all ui-state-default ui-state -active "> <span class =" ui-radiobutton-icon ui-icon ui-icon-bullet "> </ span> </ div> - Chemaxa

1 answer 1

  <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> <label for="safeWalkForm:circle">Автоматически</label> </div> <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> <label for="safeWalkForm:polygon">Нарисовать</label> </div> </div> //CSS /*UI-ONEBUTTON*/ .zone_selector { display: table; width: 100%; position: relative; } .zone_selector .ui-radiobutton { width: 50%; display: table-cell; text-align: center; overflow: hidden; border: 1px solid #0085ca; position: relative; z-index: 2; } .zone_selector .ui-radiobutton-box { width: 100%; height: 100%; background-color: #fff; } .zone_selector .ui-radiobutton-icon { background-image: none; display: block; width: 100%; height: 100%; } .zone_selector .ui-state-active + label{ background-color: #0085ca; color: #fff; } .zone_selector .ui-radiobutton label { width: 100%; height: 100%; display: block; text-align: center; padding: 8px; } .zone_selector .ui-radiobutton:first-of-type .ui-radiobutton-icon, .zone_selector .ui-radiobutton:first-of-type { border-radius: 100px 0 0 100px; overflow: hidden; } .zone_selector .ui-radiobutton:last-of-type .ui-radiobutton-icon, .zone_selector .ui-radiobutton:last-of-type { border-radius: 0 100px 100px 0; border-left: 0px; overflow: hidden; } .ui-helper-hidden-accessible { display: none; }

try it should work, just copy everything exactly as I threw it :)

  • WITHOUT INTERVENTION IN THE DOM !! - borodatych
  • Then, sorry, nor how, at least, nothing comes to mind ... - sea-lucky
  • You moved the label to ui-radiobutton, this is forbidden according to the rules, I cannot change the structure, I’m given rendered HTML, I can only write CSS. - Chemaxa