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