HTML 사용 안 함 버튼 : 활성 CSS 의사 클래스

Question

CSS :

button:active { 
/* active css */ 
} 

button:disabled { 
    opacity: 0.5; 
} 

HTML : I 버튼을 클릭하면 브라우저가 버튼을 추가

<button disabled="disabled">Ok</button> 

: 활성 상태가 클릭 된 것처럼 보이게 (비록 그것이 무능하게하더라도). 나는 맹세했다. 버튼이 활성화 된 경우에만 액티브가 추가되었다. 나는 무엇을 놓쳤는가?

Answer 1

내가 알 수있는 바로는 :active은 :disabled 요소를 제외하지 않습니다. 원할 경우 spec을 읽을 수 있습니다.

문제를 해결하기 위해, 당신은 당신의 :active 선택 만 :enabled 요소를 대상으로 :disabled 요소를 제외 할 수 있습니다 :

button:enabled:active { 
/* active css */ 
} 

button:disabled { 
    opacity: 0.5; 
} 

데모 : http://jsfiddle.net/Blender/LRvra/1/

Answer 2

According to the CSS3 specification (:disabled는 CSS2.1에없는) :active과 :disabled은 상호 배타적이라고 언급되어 있지 않습니다. 명세의이 부분은 명확화를 필요로하기 때문에 UA는 의사 클래스를 자유롭게 적용 할 수 있습니다.

내가 좀 더 명시 적으로 귀하의 선택기를 수정 제안 :

button:enabled:active { 
    /* active css */ 
} 
button:disabled { 
    opacity: 0.5; 
} 

Answer 3

당신은 또한 사용할 수 있습니다하지() - CSS의 기술자 :

button:active:not(:disabled) { 
/* active css */ 
} 

button:disabled { 
    opacity: 0.5; 
} 

는 너희들에게 최고의 위시 Patric