본문으로 건너뛰기
黯羽轻扬매일 조금씩

CSS 가 폼 컨트롤을 만났을 때

무료2017-10-04#CSS#按钮样式失效#-webkit-appearance#表单元素样式失效#文本框焦点黄框#文本框高亮去不掉

오래전부터의 의문: 왜 disabled textarea 의 color 가 더 옅은가?

일.CSS 와 폼 요소

CSS 2.1 사양 (3.2 UA 一致性) 에는 다음과 같은 문구가 있습니다:

CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further.

간단히 번역하면: CSS 2.1 은 어떤 속성이 폼 컨트롤과 frame 에 적용되는지, 그리고 CSS 를 사용하여 그것들에 스타일을 설정하는 방법을 정의하지 않습니다. 사용자 에이전트는 이러한 요소에 CSS 속성을 적용할 수 있습니다. 작성자는 이러한 지원을실험적인것으로 취급할 것을 권장합니다. CSS 의 향후 버전은 이를 더 자세히 지정할 수 있습니다

즉, 사양은 폼 요소의 CSS 스타일이 정상적으로生效하는 것을 보증하지 않습니다. 왜일까요?

폼 요소에는 몇 가지 특수성이 있기 때문입니다. 이러한 컨트롤은 브라우저가 아닌 운영체제에 의해 렌더링됩니다. 특히 checkbox 와 radio group 은 그것들에 스타일을 설정하려고 하면 다양한 문제에 직면합니다

확실히 일부 CSS 속성이 폼 요소에서 무효해지는 문제가 발생합니다. 예를 들어 input 의 display: table-cell 이 무효입니다. 자세한 내용은 display:table-cell not working on an input element 를 참조하십시오

이.실제 사례

먼저 이미지를 보십시오:

[caption id="attachment_1536" align="alignnone" width="577"]form-css-not-working form-css-not-working[/caption]

텍스트 색상의 명확한 차이를 볼 수 있습니다. 해당하는 HTML 구조와 CSS 스타일은 다음과 같습니다:

<!-- 왼쪽 -->
<textarea class="txtLetter" disabled="true">颜色浅不浅，应该不浅了吧</textarea>
<!-- 오른쪽 -->
<div class="txtLetter">颜色浅不浅，应该不浅了吧</div>

textarea {
    -webkit-appearance: none;
}
.txtLetter {
    resize: none;
    border: none;
    display: block;
    width: 100%;
    height: 4.5rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0.8rem 0.6rem;
    color: #f26135;
    font-size: 12px;
    background-color: transparent;
    outline: none;
}

div 와 textarea 가 동일한 스타일을 공유하지만 텍스트 색상 렌더링 효과에는 큰 차이가 있습니다. 나중에 원인이 disabled 임을 확인했습니다. 정상적으로 입력 가능한 input, textarea 의 color 는 정확하지만 disabled 상태인 경우 color 는 신뢰할 수 없게 됩니다. "비활성" 상태는입력 컨트롤 전체에 투명도 필터를 한 층 씌운 것같습니다 (추측). 만약 그렇다면情理之中입니다. 폼 요소가 상호작용할 수 없게 되면 사용자에게 강한 인지를 제공해야 하며 상호작용 가능한 상태의 표현과 명확한 차이가 있어야 하기 때문입니다

이는 또한 커스텀된 폼 컨트롤 (비네이티브) 의 경우 배색에서 이러한 세부 사항에 주의해야 함을 상기시킵니다. 비활성 상태는 배경색을 회색화할 뿐만 아니라 텍스트 색상, 테두리 색상, 아이콘 장식 등도 고려해야 합니다

비교적 숨겨진 점은 폼 요소의 이러한 차이가개발 환경에서 발견할 수 없다는 것입니다. 아래 그림과 같습니다:

[caption id="attachment_1538" align="alignnone" width="526"]mac-chrome&safari mac-chrome&safari[/caption]

Chrome 에서 disabled 텍스트 색상은 차이가 없습니다 (Firefox 에서도 차이가 없습니다). Safari 에서는 육안으로 볼 수 없는 차이가 있는 것 같습니다 (n 배 확대하면 색상 차이를 발견할 수 있습니다). 물론 개발 과정에서 일찍 실기 테스트하면 문제를 쉽게 발견할 수 있지만 구현 방안에서 이러한 상황을 피하는 것이 더 중요합니다

P.S.이 사례 시나리오는 주로 게으름 때문으로 상호작용 가능한 폼 페이지와 상호작용 불가능한 공유 페이지가 동일한 HTML 구조를 공유했기 때문에 textarea 에 직접 disabled 를 설정하여 div 와 같아 보이기를 기대했지만 이 숨겨진 문제를 발견했습니다

삼.폼 요소 기본 스타일 제거

모바일 환경 또는 호환성이 허용되는 환경에서는 다음 CSS 를 사용하여 텍스트 상자 기본 스타일을 제거할 수 있습니다:

input, textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    /* remove highlight outline on samsung */
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
    /* android 4.0.4 */
    -webkit-user-modify: read-write-plaintext-only;
}

P.S.三星 GT-S7562i(android4.0.4) 에서 입력 상자가 포커스를 얻을 때 하이라이트 노란색 테두리가 제거되지 않습니다. outline 이 아니며 user-modify 로 제거해야 합니다. 자세한 내용은 Disable orange outline highlight on focus 를 참조하십시오

또한 -webkit-appearance: none; 에는2 가지 문제가 있습니다:

사.결론

이 문제를 전문적으로 깊이 연구한 사람이 있으며 많은 실험 을 했습니다:

using CSS to style form controls to look exactly the same across browsers and platforms is impossible. It also shows that most browsers ignore many CSS properties when they are applied to form controls.

요약하면:

  • 폼 컨트롤에 CSS 스타일을 적용할 때는특별히 주의가 필요합니다. 사양이 유효함을 보증하지 않으므로 멀티 플랫폼에서 효과가 일치하지 않을 수 있습니다

  • 폼 요소의 스타일을 대폭 커스텀하는 것은권장되지 않습니다. 환경 호환성은 매우 취약합니다. 네이티브 스타일을 유지하거나 완전히 커스텀하는 (예를 들어 select 를 수동으로 구현하는) 중 하나를 선택하고 폼 요소를 사용하지 않도록 합니다

참고 자료

댓글

아직 댓글이 없습니다

댓글 작성