HTML5 number input의 화살표를 숨기는 방법

질문 : HTML5 숫자 입력의 스핀 상자를 숨길 수 있습니까?

---

일부 브라우저 (예 : Chrome)에서 숫자 유형의 HTML 입력에 대해 렌더링하는 새 스핀 상자를 숨기는 브라우저간에 일관된 방법이 있습니까? 위 / 아래 화살표가 나타나지 않도록 CSS 또는 JavaScript 메서드를 찾고 있습니다.

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

답변

---

이 CSS는 웹킷 브라우저의 스핀 버튼을 효과적으로 숨 깁니다 (Chrome 7.0.517.44 및 Safari 버전 5.0.2 (6533.18.5)에서 테스트했습니다).

 

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	/* display: none; <- Crashes Chrome on hover */
	-webkit-appearance: none;
	margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
            
input[type=number] {
	-moz-appearance:textfield; /* Firefox */
}

<input type="number" step="0.01" />

언제든지 인스펙터 (웹킷, Firefox 용 Firebug)를 사용하여 관심있는 요소에 대해 일치하는 CSS 속성을 찾고 Pseudo 요소를 찾을 수 있습니다. 이 이미지는 입력 요소 type = "number"에 대한 결과를 보여줍니다.

출처 : https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box