css - 不同css的jsf格式selectOneRadio元素

Question

有没有一种选项或方法可以为 ah:selectOneRadio 的 f:selectItems 设置不同的样式？我想要一个红色和一个绿色突出显示的单选按钮

此致

Answer 1

Thx，但问题是，渲染时没有创建元素。

我找到了解决方案：

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

Answer 2

在谷歌上搜索后，我发现了这个：

HTML 文件：

<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 文件：

 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*/
 }

希望对你有帮助！