양식 컨트롤과 관련된 CSS 선택기

Nowadays, we tend to use JavaScript to validate the form. Then adding some classes to help us style the input elements. In some cases, we probably no need to create extra classes because there are already some CSS selectors that can help us do the job. In this article, I will introduce some CSS selectors related to form control which you might not know before.

의제

Form Related CSS Selectors

:require & :placeholder-shown

:out-of-range

:invalid

:default

:read-only

Browser Support

양식 관련 CSS 선택자

This image is coming from the State of CSS 2019 . 양식 제어와 관련된 일부 CSS 선택기는 많은 개발자가 사용하지 않았습니다.

:요구 및 :자리 표시자 표시

첫 번째 예는 :required 입니다. 입력 요소에 Pseudo-elements를 사용할 수 없기 때문에 입력 요소 뒤에 여분의 div를 추가하여 메시지를 표시합니다.

<label>
  <span>Name</span>
  <input type="text" name="name" placeholder="your name" required />
  <div></div>
</label>

그런 다음 :required를 사용하여 채워야 하는 입력에 대한 스타일을 추가할 수 있습니다.

input:required + div::before {
  content: "(required)";
  color: red;
}

사용자가 입력을 채운 후 경고 메시지를 숨기려면 :placeholder-shown를 사용하여 트릭을 수행할 수 있습니다.

input:required + div::before {
  display: none;
}
input:placeholder-shown + div::before {
  display: block;
}

: 범위를 벗어남

입력 범위를 설정한 경우 :out-of-range를 사용하여 입력 값이 제한 내에 있지 않을 때 사용자에게 경고할 수 있습니다.

<label>
  <span>Years of Experience</span>
  <input type="number" min="0" max="100" />
  <div></div>
</label>

input:out-of-range + div::before {
  content: "(out-of-range)";
  color: red;
}

:유효하지 않은

사용자가 제공하는 콘텐츠에 오류가 있는 경우 양식이 아직 완료되지 않았음을 사용자에게 알리고 싶을 수 있습니다. 여기에서 :invalid를 적용하여 결과를 표시할 수 있습니다.

<form>
  <label>
    <span>Name</span>
    <input type="text" name="name" placeholder="your name" required />
    <div></div>
  </label>
  <button type="submit"></button>
</form>

button:before {
  content: "Ready to Submit";
}
form:invalid > button {
  background: darkgray;
}
form:invalid > button:before {
  content: "Not Ready";
}

:기본

경우에 따라 확인란 또는 라디오에 대한 기본 옵션을 설정합니다. 이 옵션이 기본적으로 선택되어 있음을 사용자에게 알리는 것이 좋습니다. :default를 사용하여 추가 스타일을 추가할 수 있습니다.

<div>
  <span>Fields</span>
  <label>
    <input type="checkbox" value="fe" checked />
    Front-End Developer
    <div></div>
  </label>
  <label>
    <input type="checkbox" value="be" />
    Back-End Developer
    <div></div>
  </label>
</div>

input:default + div::before {
  content: "(default)";
  color: red;
}

:읽기 전용

사용자가 양식을 편집할 때 특정 열(예: 사용자 ID)을 편집하도록 허용하지 않을 수 있습니다. 따라서 :read-only 표시를 사용하여 다른 스타일을 식별할 수 있습니다.

<label>
  <span>Referred by</span>
  <input type="text" value="[email protected]" readonly />
  <div></div>
</label>

input:read-only + div::before {
  content: "(read-only)";
  color: red;
}

다음은 위의 모든 시나리오를 표시하는 예입니다.

브라우저 지원

Here is the status of the browser support for all those Pseudo-classes . (2020-03-22)

결론

솔직히 JavaScript를 통해 양식 유효성 검사를 처리하면 최대한의 유연성을 제공할 수 있으며 입력 요소 기본 스타일을 위한 추가 클래스를 쉽게 만들 수 있습니다.

사용 사례가 단순하고 HTML 속성을 사용하여 양식 유효성 검사를 구현할 수 있는 경우. 그런 다음 CSS 선택기를 사용하여 입력 요소의 스타일을 지정하는 것이 좋은 해결책이 될 것입니다.

표준 구문이 있기 때문에 코드를 읽기가 더 쉬울 것입니다. 그리고 이제 HTML에는 대부분의 사용 사례에 대한 입력을 검증하는 데 도움이 되는 충분한 속성이 이미 있습니다.


HTML 속성을 사용하여 양식 유효성 검사를 수행할 때의 단점은 스타일이 다른 브라우저에서 일관성이 없다는 것입니다.


--

참조

CSS pseudo-class

form-controls selectors

HTML Input Attributes

Form Validation