입력 범위에 대한 CSS 선택기

이 게시물에서는 입력 범위에 대한 Css 선택기를 확인할 것입니다. 이 선택자는 우리 중 많은 사람들이 알지 못할 것입니다.

우리 모두는 프로젝트에서 입력 요소를 사용하며 숫자를 입력하기 위한 필드를 정의하는 입력 유형="숫자"를 알고 있어야 합니다.

이를 통해 사용자가 숫자 이외의 다른 문자를 입력하는 것을 제한할 수 있습니다. 태그 입력을 사용하고 아래와 같이 "숫자"의 유형 속성 값을 제공할 때
<input type="number">
이것은 우리에게 출력을 제공합니다



이 입력 상자에는 오른쪽에 입력에 입력된 숫자를 늘리거나 줄이는 데 사용할 수 있는 2개의 버튼이 있습니다.

아래와 같이 입력에 입력할 숫자의 최소값과 최대값을 설정할 수 있습니다.
<input type="number" min="2" max="5">
이렇게 하면 입력의 최소 및 최대 속성에 지정한 대로 사용자가 2에서 5 사이의 숫자만 입력하도록 제한됩니다.

이제 CSS 선택기를 사용하여 사용자가 지정된 최소값과 최대값 사이에 입력하지 않았는지 감지하고 이에 대해 CSS를 적용할 수 있습니다.

HTML
<input type="number" min="2" max="5">
CSS

input:in-range {
  border: 1px solid green;
}

input:out-of-range {
border: 1px solid red;
}

위의 css 코드는 입력란에 입력된 모든 값을 확인하고, 입력란에 입력된 숫자가 최소값과 최대값의 범위 사이에 있지 않으면 아래와 같이 입력란의 색상을 빨간색으로 변경합니다.



입력한 숫자가 최소값과 최대값 사이에 있으면 아래와 같이 입력 상자의 색상이 녹색으로 변경됩니다.



이것은 범위 내 및 범위 밖의 css 선택기의 사용이었습니다. 이것이 유용하기를 바랍니다.

행복한 코딩!

전체 문서를 여기에서 확인하세요: Psuedo Selectors for Inputs in Css