제출 입력이 : 버튼의 텍스트를 클릭하면 IE8에서 활성 상태가 표시되지 않습니다.

Question

제출 버튼의 텍스트 값을 정확히 클릭하면 IE8에서 input:active CSS 선택기의 속성이 표시되지 않습니다. .

하지만 버튼의 다른 부분을 클릭하면 가져옵니다.

왜? 어떻게 해결할 수 있습니까?

Answer 1

당신은 당신의 input:active 선택 선언에 input:focus을 적용하여이 작업을 수행 할 수 있습니다 :

input:active,input:focus{background-color:#000} 

함께 :active 및 :focus을 적용 UI/UX/등등 .... 많은 것을 위해 중대하다.

Answer 2

:active 선택기 _{편집 IE의/편집} 선택 스타일 활성 링크 (앵커) 요소가 아닌 입력하는데 사용된다.

Javascript를 사용하여 버튼에 초점 이벤트를 첨부하십시오.

Answer 3

정말 흥미 롭습니다. 전에는 눈치 채지 못했습니다. IE9도 똑같은 일을합니다 : 텍스트를 클릭하면 :active 스타일이 적용되지 않습니다. 텍스트 외부를 클릭하면됩니다.

IE6과 7은 버튼에 많은 텍스트가있는 경우 버튼의 가장자리가 들쭉날쭉하게 그려지는 문제가있었습니다. 이 문제는 applying overflow: visible to the button으로 해결할 수 있습니다. 그래도이 문제에 아무런 영향을주지 않는 것 같습니다.

단추 모양을 제공하기 위해 zoom: 1을 적용 해 보았습니다 (양식 컨트롤에 이미 레이아웃이 있지만).하지만 아무런 효과가 없었습니다.

불행히도이 문제에 대한 CSS 해결 방법이없는 것 같습니다.

Answer 4

큰 덕분에 앨버트는 :focus 선택기를 언급했습니다. 좋은 정보를 찾지 않고도 몇 시간 동안 '클릭 연결'문제에 대한 해결책을 찾고있었습니다.

내 문제는 OP와 비슷하지만 입력 버튼 대신 링크가 있습니다.

는 기본적으로, 나는 여러 링크/버튼이 있고 IE에서 만 것없는 '빛'을 통해 a 내부의 span 때문에 버튼의 속성을 변경할 링크에 :active 선택기를 사용 할 수 없었습니다.

지금, 나는 onclick="this.blur();"과 함께 a에 a:active 및 a:focus를 사용하여 내 목적을위한 매력처럼 작동합니다. 코드가 http://jsfiddle.net/pezzi/UzARF/