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

워드프레스 정보를 제공하는 블로그 Avada 2022. 11. 18. 00:42 • 댓글:

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

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

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

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

 

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

텍스트 입력 상자에 숫자만 입력 가능하도록 하거나 숫자와 하이픈만 입력을 허용하고 싶은 경우가 있습니다. 이 경우 text input 필드의 타입을 number나 tel로 변경하는 것을 고려해볼 수 있습니다.

avada.tistory.com

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

HTML5 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에 우편번호 검색창 추가하기 - 워드프레스 정보꾸러미

작년에 다음 우편번호 API를 사용하여 워드프레스에 우편번호 검색창을 다는 방법에 대한 글을 작성한 적이 있습니다. 하지만 오늘 살펴보니 다음 우편보호 API가 새로운 우편번호 체계에 따라

www.thewordcracker.com

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

참고

https://avada.tistory.com/2760

 

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

소제목(헤딩) 앞에 여러 가지 컬러로 된 정사각형을 추가한 워드프레스 사이트를 본 적이 있습니다. 예를 들어, 다음과 같이 소제목 앞에 빨간색 정사각형 도형이 표시되었습니다. 이런 도형을

avada.tistory.com

https://avada.tistory.com/2824

 

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

이 티스토리 블로그의 하단에는 배너가 표시되고 있습니다. 닫기 기능이 있는 배너의 경우 보통 Javascript를 사용하지만 이 블로그에 사용된 배너는 HTML/CSS만으로 구현되었습니다. Javascript를 이용

avada.tistory.com