0

Всем привет. Есть html и css. Надо Выделить цвет выбранной кнопки Белым(label элемент). Нельзя использовать js. У div с классом ui-radiobutton-box в зависимости от выбора кнопки ставится/снимается класс ui-state-active. Больше ничего не меняется, доступа к DOM нет, доступа к 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>

2
  • Надо Выделить цвет выбранной кнопки Белым по подробней пожалуйста 5 мая 2016 в 13:43
  • применить css свойство color: #fff к элементу label в зависимости от наличия/отсутствия класса ui-state-active у элемента <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>
    – Chemaxa
    5 мая 2016 в 17:33

1 ответ 1

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;
}

попробуй должно всё работать, только скопируй всё в точности как я скинул :)

3
  • БЕЗ ВМЕШАТЕЛЬСТВА В DOM !!
    – borodatych
    5 мая 2016 в 13:56
  • Тогда, сорри, ни как, по крайней мере, в голову ничего не приходит...
    – sea-lucky
    5 мая 2016 в 14:02
  • Вы перенесли label в ui-radiobutton , это по правилам запрещено, я не могу менять структуру, мне дается отрендереный HTML я могу писать только CSS.
    – Chemaxa
    5 мая 2016 в 17:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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