java – primefaces design radio

Question:

Hello. There is a SelectOneRadio component from the Primefaces library on the page http://www.primefaces.org/showcase/ui/input/oneRadio.xhtml It is rendered in such HTML, there is CSS that decorates the whole thing in the form I need. Only now I can not understand how you can make the color on the blue button white? Is it possible to do without changing the 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>

Answer:

In the end, we ended up rewriting the component's render.

Scroll to Top