프로젝트를 진행하던 중, 인증번호 입력은 숫자만 입력이 가능하게 하기 위해서 type='number'로 제한하였다. 그러면 number 타입이 가지고 있는 버튼이 나타나게 된다. 해당 버튼이 굉장히 거슬리기 때문에.. 버튼을 삭제하기로 했다.
화살표 버튼 삭제 전
화살표 버튼 삭제 css 코드
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
css를 사용하다보면 webkit과 같은 접두어가 붙은 친구들을 종종 볼 수수 있다. 해당 접두어는 다음과 같은 의미를 갖는다.
-webkit-: 구글, 사파리 브라우저에 적용-moz-: 파이어폭스 브라우저에 적용-ms-: 익스플로러에 적용, 보통 생략합니다.-o-: 오페라 브라우저에 적용
내가 추측하기로는 해당 화살표 버튼은 브라우저에서 기본적으로 적용되는 사항이기 때문에, 브라우저 접두어를 붙여서 해당 버튼을 안보이게 (-webkit-appearance: none) 해줘야 하는 것 같다.
Comments