jsf format selectOneRadio elements with different css

Question

is there an option or a way to style the f:selectItems of a h:selectOneRadio with different styles? i want e.g. a red and a green highlighted radio-button

best regards

In future CSS questions, it's helpful if you show the JSF-generated HTML output instead of talking about JSF components/tags which the average CSS developer know absolutely nothing about (and thus you generally get only useless low quality and bogus answers). It makes actually completely sense: CSS doesn't work on JSF source code at all, but on HTML DOM tree (as generated by JSF). Try to reduce irrelevant JSF noise in questions about HTML, CSS and JS. Once you got the answer, then you just have to change the JSF source code in such way that it generates exactly the desired HTML/CSS/JS code. — BalusC, Jul 29 '13 at 15:20

score 0 · Answer 1 · answered Jul 29 '13 at 09:00

After a seargh on google I have found this :

HTML file:

<label for="radio1">label 1</label><span></span><input type="radio" id="radio1" name="myRadio" checked="checked"/><span></span>
<label for="radio2">label 2</label><span></span><input type="radio" id="radio2" name="myRadio" /><span></span>
<label for="radio3">label 3</label><span></span><input type="radio" id="radio3" name="myRadio" /><span></span>
<label for="radio4">label 4</label><span></span><input type="radio" id="radio4" name="myRadio" /><span></span>

CSS file:

 span{
      position: absolute;
      right: 0;
      width: 25px;
      height: 25px;
      line-height: 25px;
      padding: 3px;
      color: #FFF;
      text-align: center;
      background: #c06f59;
      }

 span:after{
     content: "no"; /*if CSS are disbled span elements are not displayed*/
 }

 input{
     position: absolute;
     right: 0;
     margin: 0;
     width: 31px;
     height: 31px;
     /*hide the radio button*/
     filter:alpha(opacity=0);
     -moz-opacity:0;
     -khtml-opacity: 0;
     opacity: 0;
         cursor: pointer;
 }

 input[type="radio"] + span{ /*the span element that immediately follow the radio button */
     visibility: hidden; /*temporarily hide the "YES" label*/
     background: #6EB558;
 }

 input[type="radio"] + span:after{
     content: "yes"; /*if CSS are disbled span elements are not displayed*/
 }


 input[type="radio"]:checked + span{
     visibility: visible; /*show the "YES" label only if the radio button is checked*/
 }

Hope it helpes you!

score 0 · Answer 2 · answered Jul 29 '13 at 09:55

Thx, but the problem is, there are no elements created when rendered.

i found the solution:

table.choices > tbody > tr:first-child input:checked + label{
    background-color:#228b22;
    color:#F7F7F7;
}

table.choices > tbody > tr:first-child + tr input:checked + label{
    background-color:#800000;
    color:#F7F7F7;
}

jsf format selectOneRadio elements with different css

2 Answers2