ADF不`吨更改CSS：选中状态

Question

我是新来的ADF和现在我有使用CSS ADF复选框和单选按钮定制的一个问题。 这里是一个演示：

`http://jsfiddle.net/sbef2so3/16/` 

一切工作中的jsfiddle罚款，但在ADF状态不`吨更改为：检查。 也许有另一种方法来改变ADF中复选框/单选按钮的状态？

！重要。我不能更改HTML代码，因为它是由ADF生成的。

Answer 1

哪个组件你使用复选框或单选按钮。我曾经在我的JSF页面普通的HTML标记，并添加你的CSS代码，并看到了相同的输出为您的小提琴：

<input type="radio" name="..." value="..." /> 

如果使用ADF组件，说selectBooleanRadio，它有望使一个ADF Skin file这是一个超集CSS和这里我们编写的选择器不是DOM元素本身的组件。所以这是一个皮肤文件的样本：

af|selectBooleanRadio::label { 
    color: green; 
} 

这填补selectBooleanRadio成分与绿颜色的标签。

改变你的CSS样式表ADF的皮肤是一个不平凡的任务，如果不是不可能的，因为ADF内部限制。因此，通过纯CSS的解决方案坚持，也许你能得到你的风格，加入styleClass到组件，它可以由目前的应用主题抑制不必要的添加方式工作：

<af:selectBooleanRadio text="ADF Radio Button" label="Label" styleClass="customRadioButtonComp"/> 

在你.css文件中添加类前缀：

.customRadioButtonComp input[type="radio"] { 
    display: inline-block; 
    width: 21px; 
    height: 21px; 
    margin: -1px 4px 0 0; 
    vertical-align: middle; 
    background: url(http://csscheckbox.com/checkboxes/u/csscheckbox_ef32e9f2ed5c57aba4c2206a981ba7a4.png)0px top no-repeat; 
    cursor: pointer; 
    appearance: none; 
    -moz-appearance: none; 
    /* Firefox */ 

    -webkit-appearance: none; 
    /* Safari and Chrome */ 
} 

.customRadioButtonComp input[type="radio"]:checked { 
    background: url(http://csscheckbox.com/checkboxes/u/csscheckbox_ef32e9f2ed5c57aba4c2206a981ba7a4.png)0px bottom no-repeat; 
}