ADF가 CSS로 변경되지 않음 : 체크 됨 상태

Question

ADF를 처음 사용하고 있으며 현재 CSS를 사용하는 ADF 체크 박스 및 라디오 버튼 사용자 정의에 문제가 있습니다. 여기 데모입니다 :

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

모든 것이 jsfiddle에서 잘 작동하지만 ADF의 상태로 변경 어쩌려 구`t : 선택. ADF에서 체크 박스/라디오 버튼의 상태를 변경하는 다른 방법이 있습니까?

! 중요. ADF에서 생성되므로 HTML 코드를 변경할 수 없습니다.

Answer 1

확인란이나 라디오 버튼에는 어떤 구성 요소를 사용합니까? 내 JSF 페이지에 일반 HTML 태그를 사용하여 CSS 코드를 추가하고 바이올린 같은 출력을 보았다 : 당신이 ADF 구성 요소를 사용하는 경우

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

는,의 상위 집합 인 ADF Skin file을 할 것으로 기대 것 selectBooleanRadio 말 CSS 및 여기에서는 DOM 요소가 아닌 구성 요소를 대상으로 셀렉터를 작성합니다.

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

이 녹색 색상 selectBooleanRadio 구성 요소의 레이블을 입력 : 그래서이 스킨 파일의 샘플입니다.

CSS 스타일 시트를 ADF 스킨으로 변경하는 것은 ADF 내부 제한으로 인해 불가능하지는 않지만 중요한 작업입니다. 당신의 .css 파일 추가 클래스 접두사에서

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

:

일반 CSS 용액에 고집에 의해, 어쩌면 당신은 당신의 스타일이 현재 응용 프로그램 테마에 의해 원치 않는 추가 스타일을 억제 할 수 있습니다 구성 요소에 styleClass을 추가하여 작업을 얻을 수 있도록

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