Firefox 4 필수 입력 양식 빨간색 테두리 / 개요

Firefox 4 필수 입력 양식 빨간색 테두리 / 개요

---

최근에 HTML5 jQuery 플러그인을 개발했으며 FF4 베타에서 필수 필드의 빨간색 테두리를 제거하는 데 문제가 있습니다.

FF가이 테두리 / 개요를 필수 필드에 적용하고 값이 설정되면 제거한다는 것을 알았습니다. 문제는 이전 브라우저에서 자리 표시 자 속성을 에뮬레이트하기 위해 value 속성을 사용하고 있다는 것입니다. 따라서 빨간색 선을 표시하지 않으려면이 기능이있는 모든 입력이 필요합니다.

여기 플러그인 의 데모 페이지에서 문제를 볼 수 있습니다.

---

CSS에서 사용할 수있는 새로운 HTML5 양식 기능에 대한 몇 가지 새로운 의사 선택기가 있습니다. 당신은 아마도 :invalid. 다음은 모두 MDC Firefox 4 문서 에서 가져온 것입니다 .

• :invalidCSS 의사 클래스는 그 내용이 입력의 종류에 따라 설정 거르지 요소에 자동으로 적용

• :-moz-submit-invalid하나 개 이상의 양식 필드는 확인하지 않습니다 때 의사 클래스는 양식 필드에 제출 버튼에 적용됩니다.

• :required의사 클래스는 자동으로 필요한 속성을 지정하는 필드에 적용된다; :optional의사 클래스는 다른 모든 필드에 적용됩니다.

• :-moz-placeholder의사 클래스는 당신에게 양식 필드에 스타일 자리 표시 자 텍스트를 수 있도록 추가되었습니다.

• :-moz-focusring의사 선택은 도마뱀 요소가 렌더링 초점 표시를해야한다고 생각합니다 때 요소의 모양을 지정할 수 있습니다.

---

좀 더 구체적으로 입력 컨트롤에 해당 스타일을 적용해야합니다.

input:invalid {
    box-shadow: none;
}

---

이 코드를 빠르고 간단한 솔루션으로 사용하십시오.

:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow:none;
}

참조 :-https://developer.mozilla.org/en-US/docs/Web/CSS/: invalid

---

필요한 input것을 formwith novalidate속성 으로 감싸십시오.

<form novalidate>
    <input required>
</form>

---

이것을 시도하십시오,

$ ( "form"). attr ( "novalidate", true);

글로벌 .js 파일 또는 헤더 섹션의 양식에 대해.

참조 URL : https://stackoverflow.com/questions/3809146/firefox-4-required-input-form-red-border-outline