3

Здравствуйте. Есть на странице компонент 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:&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>

1
  • Если применение p:ajax не считается изменением DOM или JS (хотя именно это и будет делать p:ajax, причём и то и другое), то есть один вариант. Еще есть компонент OneButton primefaces.org/showcase/ui/input/oneButton.xhtml Может с ним больше повезёт
    – Sergey
    6 мая 2016 в 2:23

1 ответ 1

1

Пришли в итоге к тому что переписали рендер компонента.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.