2012-09-05 4 views
2

수많은 기사를 읽었지만 Firefox에서 HTML5 유효성 검사 오류를 스타일 화하는 방법을 찾지 못했습니다. 아무도 이걸 가지고 행운이 있었나요? Chrome 및 IE에서 멋진 메시지 스타일을 지정할 수있었습니다 (IE의 경우 Webshims 사용).Firefox에서 HTML5 유효성 검사 오류의 스타일을 지정하는 방법

Firefox에서 메시지 모양이 마음에 들지 않습니다 (스크린 샷 참조). This link는 유망하지 않습니다. this one도 아닙니다. 그러나 이러한 링크는 조금 오래되었습니다. 난 누군가가 파이어 폭스의 최신 버전 (내가 버전 14.0.1을 사용하고 있습니다)에 대해 알아 냈 으면 좋겠다.

HTML5 validation message in Firefox

답변

1

답변은 ... 답변이 없습니까? 검색을 계속했는데 Firefox에서 이러한 오류의 스타일을 지정하는 방법이 없습니다. 그러나 좋은 소식은 최신 버전의 Firefox (16.0.1)가 프롬프트의 모양을 정리하고 못생긴 내부 사각형을 제거한다는 것입니다 (스크린 샷 참조). 그래도 이러한 맞춤 색상을 사용하여 스타일을 지정하는 것이 좋습니다. 예를 들어 어두운 배경에 흰색 텍스트가있을 수 있습니다.

enter image description here

+1

Firefox에서이 문제를 해결하는 데 신경 쓰면 버그에 투표하십시오 : bugzilla.mozilla.org/show_bug.cgi?id=845405 –

+0

감사합니다. 투표했습니다. – WEFX

-1

여기에 같은 질문 ==>

그리고 나는 우리가 툴팁을 설계 할 수 있다고 생각하지 않습니다 순간 How do I style the HTML5 form validation error messages with CSS?. 양식에 novalidate 속성을 사용하고 사용자 정의 툴팁을 작성할 수 있습니다.

+0

나는이 질문을 읽었으며, 웹킷 유효성 검사 ... css 클래스를 사용하여 좋은 작업을 수행합니다. Firefox에 대해서는 언급하지 않습니다. 그래서 [이 답변] (http://stackoverflow.com/a/6555897/590719)에 의견을 게시했습니다. – WEFX

1

은 내가 어떻게 왔는지 모르겠어요,이 오래된 스레드가 보인다. CSS와

스타일링 폼 오류가 파이어 폭스 오류 상자 :invalid

그래서 의사 선택을 통해 수행 할 수 있습니다 그러나 단지 (최신) 대답 권리를 얻을 통과 않도록 누구라도 될 수 있습니다 다음을 사용하여이를 제거 할 수 있습니다 :

input[type="number"]:invalid {box-shadow: none;} 
관련 문제