HTML5 number 타입 입력 필드에서 스핀 버튼을 숨기는 방법

입력 양식에서 입력 필드의 타입을 number로 지정할 경우 해당 필드를 선택하면 숫자를 높이거나 낮출 수 있는 스핀 버튼이 표시됩니다. 이 스핀 버튼(증감 버튼)은 CSS로 숨길 수 있습니다.

HTML5 number 타입 입력 필드에서 스핀 버튼을 숨기는 방법

<input id="quantity" type="number">

워드프레스 Quform에서 다음 우편번호 스크립트를 적용하여 우편번호를 검색하여 주소를 입력할 수 있는 작업을 진행했습니다. 추가로 전화번호 필드에 숫자만 입력이 가능하도록 설정했습니다. Quform 개발자가 제시하는 코드를 사용하여 해당 필드를 number 타입으로 변경했습니다.

텍스트 입력 상자에 숫자와 하이픈만 입력 허용하기

필드에 숫자만 입력이 가능하도록 자바스크립트를 사용했지만 클라이언트 브라우저에서는 그 기능이 작동하지 않는다고 하여 number 타입으로 필드 유형을 변경했는데, 이 때문에 숫자값을 높이거나 낮출 수 있는 스핀 버튼(증감 버튼)이 표시되었습니다.

스핀 버튼은 "Can I hide the HTML5 number input’s spin box?" 문서에서 제시하는 다음과 같은 CSS 코드를 사용하여 제거할 수 있습니다.

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

워드프레스 컨택트 폼(Contact Form)에 우편번호 검색 기능을 추가하는 방법은 다음 글을 참고할 수 있습니다.

워드프레스 Contact Form 7/Quform에 우편번호 검색창 추가하기 - 워드프레스 정보꾸러미

하지만 실제로 해보면 생각처럼 잘 되지 않을 수 있습니다. 다음 우편번호 서비스 기능을 통합하는 데 어려움을 겪는 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다.

참고

https://avada.tistory.com/2760

텍스트 앞에 정사각형 도형 표시하기 (CSS)

https://avada.tistory.com/2824

CSS를 사용하여 하단 배너 만들기