[attributes] Firefox 4 : 필수 양식 입력에서 빨간색 테두리를 제거하는 방법이 있습니까?

Program / 글쓴이

양식 필드에 required가 정의되면 Firefox 4는 사용자가 제출 버튼을 누르기 전에도 자동으로이 요소에 빨간색 테두리를 표시합니다.

<input type="text" name="example" value="This is an example" required />

처음에는 실수를하지 않았기 때문에 사용자가 불편하다고 생각합니다.

초기 상태에서는 빨간색 테두리를 숨기려고했지만 필수로 표시된 누락 된 필드가있는 경우 사용자가 보내기 버튼을 눌렀을 때 표시합니다.

나는 보았다 :required및 :invalid새로운 의사 선택에서, 그러나 변화는위한 전후 검증. ( Firefox 4 필수 입력 양식 RED border / outline )

사용자가 양식을 제출하기 전에 빨간색 테두리를 비활성화하고 누락 된 필드가있는 경우 표시하는 방법이 있습니까?

답변

이것은 약간 까다로 웠지만이 예제를 설정했습니다 : http://jsfiddle.net/c5aTe/ 나를 위해 일하고 있습니다. 기본적으로 트릭은 잘못된 자리 표시 자 텍스트를 사용하는 것 같습니다. 그렇지 않으면 다음을 수행 할 수 있습니다.

input:required {
    box-shadow:none;
}
input:invalid {
    box-shadow:0 0 3px red;
}

또는 비슷한 …

하지만 FF4가 자리 표시 자 텍스트의 유효성을 검사하기로 결정했기 때문에 (이유는 모르겠습니다 …) 바이올린의 솔루션 (작은 해키 사용 !important)이 필요합니다.

도움이 되었기를 바랍니다.

편집하다

도! -어리석은 기분 이네요. 내 바이올린을 업데이트했습니다 : http://jsfiddle.net/c5aTe/2/-:focus 가상 클래스를 사용 하여 사용자가 입력하는 동안 유효한 것처럼 요소 스타일을 유지할 수 있습니다 . 항목이 초점을 잃었을 때 내용이 유효하지 않은 경우에도 여전히 빨간색으로 강조 표시되지만 설계된 동작으로 할 수있는 일이 너무 많다고 생각합니다.

HTH 🙂

수락 후 수정 :

OP의 요청에 따른 예 요약 (처음 두 개는 Chrome이 아닌 FF4 용으로 만 설계됨 )

  1. 자리 표시 자 텍스트를 확인하는 FF 수정 : http://jsfiddle.net/c5aTe/
  2. 입력시 FF 유효성 검사 수정 : http://jsfiddle.net/c5aTe/2
  3. JS 솔루션 토글 링 스타일 / 검증 : http://jsfiddle.net/c5aTe/4

답변

Firefox 26부터 유효하지 않은 필수 필드를 식별하는 데 사용되는 실제 CSS는 다음과 같습니다 (forms.css에서 가져옴).

:not(output):-moz-ui-invalid {
    box-shadow: 0 0 1.5px 1px red;
}

다른 브라우저에서 복제하려면 다음을 사용합니다.

input:invalid {
    box-shadow: 0 0 1.5px 1px red;
}

나는 픽셀 설정을 가지고 놀았지만 moz 소스를 보지 않고는 1.5px를 추측하지 못했을 것입니다.

비활성화하려면 다음을 사용할 수 있습니다.

input:invalid {
    box-shadow: none;
}

답변

나를 위해 일한 매우 쉬운 솔루션이 있습니다. 기본적으로 추악한 빨간색을 필수가 아닌 필드의 표준 색상 인 매우 멋진 파란색과 웹 규칙으로 변경했습니다.

:required {
    border-color: rgba(82, 168, 236, 0.8);
}

답변

이것은 나를 위해 잘 작동했습니다.

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

답변

시험: 

document.getElementById('myform').reset();

답변

이것을 시도하십시오,

$ ( “form”). attr ( “novalidate”, true);

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

답변