비활성화 된 라디오 버튼의 스타일을 지정하는 방법은 무엇입니까?

Question

테이블 셀 내에 라디오 버튼 세트가 있습니다. 표 셀의 배경색은 페이지 배경과 다릅니다.

다른 입력에 따라 하나 이상의 라디오 버튼을 비활성화하는 경우가 있습니다. 비활성화 된 경우 라디오 버튼의 내부는 표 셀의 배경을 사용합니다. 원색이 약간 회색으로 변합니다. 이 단추를 결합하면 단추 모양이 "사라진"모양이됩니다. 좀 더 자세히 조사해 보면 아직도 거기에있는 것으로 나타났습니다.

비활성화 된 라디오 버튼의 모양을 변경하기 위해 CSS 항목을 정의하는 데 어려움을 겪었습니다 ... 할 수 있습니까? 현재 다음과 같은 작업을하고 있습니다.

.radio { 
    background-color: #FFFFFF; 
} 

.radio:disabled { 
    background-color: #FFFFFF; 
} 

이미지를 사용해야합니까?

업데이트 그것은 배경이 문제는 아니지만 버튼의 내부입니다. 비활성화되면 버튼 내부가 표 셀의 배경색을 차지합니다 ... 우, 여기 아이디어가 있습니다. 표 셀과 라디오 버튼을 모두 변경합니다.

Answer 1

이 경우 CSS attribute selector[attributename]을 사용할 수 있습니다.

.radio[disabled] { 
    background-color: #FFFFFF; 
} 

Answer 2

테두리 색상을 추가해보세요. 초기 가장자리 스타일링이라고 생각합니다.

border-color #ffffff; 

가장자리 스타일을 지정하지 않을 수도 있습니다.

border: 0px solid #ffffff; 

Answer 3

Replace them 배경 이미지가 있습니다.

Answer 4

어쩌면 하나 개의 솔루션 당신의 자신의 행동 아무것도 사용하지 않고 단지

1. 변경 불투명도를
2. 캡처 이벤트 및 구현하지

뭔가 같은 :에서

<input type="radio" name="i1" class="enabledinput" /> 

당신의 CSS 쓰기 :

.disabledinput { 
    opacity: 0.4; 
    filter: alpha(opacity=40); /* For IE8 and earlier */ 
} 
.enabledinput { 
    opacity: 1; 
    filter: alpha(opacity=100); /* For IE8 and earlier */ 
} 

하고 당신이 당신의 자바 스크립트 쓰기에 jQuery를 사용하는 경우, 예를 들어 : 속성 후 :

$(".enabledinput").each(function(i,obj) { 
    $(obj).click(function(evt) { 
     $(obj).removeClass("enabledinput"); 
     $(obj).addClass("disabledinput"); 
     /*do something here*/ 
    }); 
}); 

Answer 5

비활성화 된 라디오 버튼의 스타일을 변경하는 쉬운 방법은 간단한 된 절대 위치가 오버레이로입니다. 배경색과 테두리를 적절하게 조정할 수 있습니다. 여기

input[disabled] { 

    position: relative; 
    height:15px; 
    width: 15px; 
    box-sizing: border-box; 
    margin: 0; 
    &:after { 
    position: absolute; 
    content: ''; 
    display: block; 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    background-color:red; 

    } 
} 

그냥 CSS 파일 당신이 할 수있는 다음 참조 특정 클래스를 사용, 그 속성 선택기가 IE6에서 작동하지 않습니다 더 나은 언급 예를 들어 펜 https://codepen.io/Cuberic/pen/PmQoVd