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

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

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

모바일 사파리에서 사용<input type="number">숫자만 포함해야 하는 입력 필드의 숫자 키보드를 불러오기 때문에 잘 작동합니다.

그러나 Chrome과 Safari에서 숫자 입력을 사용하면 필드 오른쪽에 회전 버튼이 표시되므로 제 디자인에서는 쓰레기처럼 보입니다.버튼은 정말 필요 없어요, 어차피 6자리 숫자 같은 걸 써야 할 때는 쓸모가 없으니까요.

이 기능을 사용하지 않도록 설정할 수 있습니까?-webkit-appearance아니면 다른 CSS 트릭?저는 별 행운 없이 노력했습니다.

저는 이에 대한 답이 두 번째 부분이라는 것을 발견했습니다.

첫 번째 부분은 도움이 되었지만, 여전히 오른쪽에 공간이 있었습니다.type=number인풋. 인풋의 마진을 제로로 했지만 스피너의 마진도 제로로 해야 했던 것 같습니다.

이것이 해결했습니다.

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

아래 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;
}

이것이 최선의 방법인지 확실하지 않지만, 이것은 Chrome 8.0.552.5 dev에서 스피너를 사라지게 만듭니다.

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

스피너가 오페라에 출연하는 것을 막는 것은 불가능해 보입니다.임시 방편으로 스피너를 위한 공간을 마련할 수 있습니다.내가 아는 한, 다음 CSS는 오페라에서만 충분한 패딩을 추가합니다.

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

의 브라우저 기본 스피너를 피할 수 있는 또 다른 솔루션number type바꿈으로써

1. 텍스트로 타이핑하다

2. 숫자로 입력 모드 및

3. 번호만 패턴[0-9]*"

---

    <input type="text" inputmode="numeric" pattern="[0-9]*" />

'number' 타입과 달리 위 솔루션은 여전히 사용자가 입력란에 숫자가 아닌 문자를 입력할 수 있도록 허용하지만, 사용자는 이를 청취함으로써 잘못된 제출을 피할 수 있습니다.oninvalid이벤트성의

다음과 같은 요령으로 스피너를 숨길 수도 있습니다.

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

언급URL : https://stackoverflow.com/questions/3975769/disable-webkits-spin-buttons-on-input-type-number