입력 유형 = "번호"에서 웹킷의 스핀 버튼을 비활성화 하시겠습니까?

주로 모바일 사용자를위한 사이트이지만 데스크톱도 있습니다.

Mobile Safari에서는 <input type="number">숫자 만 포함해야하는 입력 필드에 숫자 키보드가 표시되므로 사용하면 효과적입니다.

그러나 Chrome과 Safari에서는 숫자 입력을 사용하면 필드의 오른쪽에 스핀 버튼이 표시되어 내 디자인에서 쓰레기처럼 보입니다. 어쨌든 6 자리 숫자와 같은 것을 쓸 때 쓸모가 없기 때문에 버튼이 실제로 필요하지 않습니다.

이것을 -webkit-appearance다른 CSS 트릭 으로 비활성화 할 수 있습니까? 나는 많은 운없이 시도했다.

아래 CSS는 Chrome과 Firefox 모두에서 작동합니다.

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

나는 이것에 대한 답의 두 번째 부분이 있음을 발견했습니다.

첫 번째 부분이 도움이되었지만 여전히 type=number입력 오른쪽에 공간이 있습니다. 입력의 여백을 0으로 만들었지 만 스피너의 여백도 0으로 설정해야합니다.

이것은 그것을 고쳤다 :

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

이것이 최선의 방법인지 확실하지 않지만 Chrome 8.0.552.5 dev에서 스피너가 사라집니다.

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

오페라에 스피너가 나타나지 않도록하는 것은 불가능한 것 같습니다. 임시 해결 방법으로 스피너를위한 공간을 만들 수 있습니다. 내가 알 수있는 한 다음 CSS는 Opera에서만 충분한 패딩을 추가합니다.

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}

다음 트릭으로 스피너를 숨길 수도 있습니다.

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity:0;
  pointer-events:none;
}