가상 클래스 선택기 : Chrome 및 Firefox에서 지원 여부를 확인 하시겠습니까?

나는이 질문에 대해 몇 가지 충돌하는 답변을 얻고 있습니다. 그래서 누군가에게 설명을 해주기를 바랍니다.가상 클래스 선택기 : Chrome 및 Firefox에서 지원 여부를 확인 하시겠습니까?

기본적으로 일부 사이트에 따르면 : 당신이 테스트 ONT로 드릴 경우,

그러나 : 완전히 크롬과 FF에서 지원 확인 마지막 사이트 인 Chrome (v24)과 FF (v18)에서 첫 번째 테스트가 실패했지만 IE10에서 성공했습니다

파이어 폭스 (그리고 어쩌면 사람들은 단지 그 elementes의 스타일을 크롬에서 지원 의사 클래스를 허용하지 않는 검사 : 그래서

<!DOCTYPE html"> 
<html> 
<head> 
<style> 
     :checked { background-color: royalblue;} 
</style> 
</head> 
<body> 
    <input type="radio" checked /> 
    <input type="radio"/> 
    <input type="checkbox" checked /> 
    <input type="checkbox" /> 
</body> 
</html>

http://tools.css3.info/selectors-test/test-checked.html#checked

이 최소한의 샘플 문제를 재현) 또는 아닙니다?

저는 웹 디자이너가 아니므로 간단한 것을 놓친 것 같습니다.

출처

2013-02-17 Sebastian K

시험은 그 브라우저의에 나를 위해 실패하지 않습니다,하지만 난 당신의 테스트 케이스에 같은데요 당신 Firefox 또는 Chrome의 라디오 나 체크 박스에서'background-color : royalblue'을 실제로 볼 수 없습니다. – BoltClock

@BoltClock 좋은 점, 나는 더 일반적인 색깔, 동일한 isssue로 검사했다. 테스트 페이지를 보면 첫 번째 테스트의 IE10 체크 박스에 녹색 배경이 표시되며 Firefox와 Chrome에는 배경이 없음을 볼 수 있습니다. 아니면 어떤 이유로 예상대로입니까? –

@ BoltClock : jsfiddle을 게시 할 수 있습니까? 나는 그것을 시도하고 일할 수 없었다. – ninMonkey

간단히 말해서 둘 다 있습니다.

그러나 문제는 특정 브라우저가 확인란 및 라디오 버튼과 같은 양식 요소를 렌더링하는 방식에서 비롯됩니다.

브라우저가 사용자 정의 기본 동작으로 사용자 정의를 덮어 쓰기 때문에 입력을 선택하면 배경색이 변경되지 않습니다.

Chrome, Safari (Webkit)의 경우 간단히 수정하면 'appearance : none;'을 설정하기 만하면됩니다. 값을 사용하여 모든 기본 스타일을 제거한 다음 고유 한 특수 혼합을 추가하십시오.

Firefox (Gecko)에는 렌더링 체크 박스와 라디오와 관련된 알려진 버그가 있으므로 모양 값에서 제한적으로 사용하게됩니다. 여기

도움 : 바이올린 http://jsfiddle.net/traxp/

희망에 대한 링크의

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      input { 
       -webkit-appearance:none; 
       -moz-appearance:none; 
       appearance:none; 
       background:white; 
       width:20px; 
       height:20px; 
       border:2px solid grey; 
       border-radius:10px; 
      } 
      input:checked { 
       background:red; 
      } 
     </style> 
    </head> 
    <body> 
     <input type="radio" checked /> 
     <input type="radio"/> 
     <input type="checkbox" checked /> 
     <input type="checkbox" /> 
    </body> 
</html>

출처

2013-04-25 23:39:06 simoncorry

가상 클래스 선택기 : Chrome 및 Firefox에서 지원 여부를 확인 하시겠습니까?

답변

관련 문제