입력 번호에서 스피너 숨기기-Firefox 29

202

Firefox 28에서는 <input type="number">숫자 만 포함 해야하는 입력 필드에 숫자 키보드가 표시되므로 잘 사용하고 있습니다.

Firefox 29에서 숫자 입력을 사용하면 필드의 오른쪽에 스핀 버튼이 표시됩니다. 어쨌든 6 ~ 10 자리 숫자와 같은 것을 쓸 때 쓸모가 없기 때문에 버튼이 실제로 필요하지 않습니다.

CSS 또는 jQuery로 이것을 비활성화 할 수 있습니까?

jquery  css  firefox  input  spinner 
— 네루 주니어
소스
2
회전 화살표를 원하지 않으면을 사용하지 마십시오 type="number". 당신은 사용할 수 type="text"와 pattern속성은 반드시이 번호의 확인하기 위해 정규식을 설정할 수 있습니다.
— 로켓 Hazmat
4
-webkit-inner-spin-button -webkit-appearance가있는 webkit-outer-spin-button : 없음; 여백 : 0; Firefox에서는 작동하지 않습니다.
— NereuJunior
12
@RocketHazmat : type="number"모바일 브라우저가 전체 키보드 대신 숫자 키보드를 표시하는 데 필요합니다.
— CodeManX
3
<input type="tel">숫자 일 뿐이며 스피너는 포함되지 않습니다.
— TomasVeras
5
type="text"터치 장치에 잘못된 키보드가 표시되므로 변경 하는 것은 좋지 않습니다.
— WhyNotHugo

답변:

523

이 블로그 게시물 에 따르면에 설정해야 -moz-appearance:textfield;합니다 input.

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;
}
<input type="number" step="0.01"/>
스 니펫 확장

— 리차드 디밍
소스
1
나는 이것을 감싸서 @-moz-document url-prefix() { ... }내가 원하는 것을한다 : 파이어 폭스에서 스피너를 숨기고, 좋지 않은 곳에서 보이지만 OP를 언급 한 것처럼 숫자 키보드를 띄우는 브라우저를 포함하여 다른 브라우저에서는 살아있게 유지하십시오.
— Michael Scheper
4
Geoff Graham의 유용한 정보 : 숫자 입력 – 브라우저 기본값 비교
— Richard Deeming
3
이것은 작동하고 실제로 스피너를 제거하지만 이제 영숫자를 입력 할 수 있습니다. 누군가가 입력 한 키가 숫자인지 여부를 확인하지 않고도 해당 시나리오를 처리 할 수있는 방법을 찾길 바랍니다.
— Jovanni G
1
@JovanniG : 스피너를 제거하지 않아도 Firefox에서 입력에 숫자가 아닌 문자를 입력 할 수 있습니다. MDN 데모로 시도하십시오 . Chrome은 두 예에서 숫자가 아닌 입력을 방지합니다.
— Richard Deeming
1
@alxndr : 또한 Chrome 66에서 "Run code snippet"을 시도했는데 예상대로 작동합니다.
— Richard Deeming
50

-moz-appearance이러한 요소 의 기본값 number-input은 Firefox 에 있음을 지적 할 가치가 있습니다.

당신은 기본적으로 스피너를 숨기려면, 당신은 설정할 수 있습니다 -moz-appearance: textfield처음에, 당신이 경우 원하는 스피너가 표시 :hover/ :focus, 당신과 함께 이전 스타일을 덮어 쓸 수 있습니다 -moz-appearance: number-input.

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}
<input type="number"/>
스 니펫 확장

Chrome / FF 간의 일관성을 향상시키기 위해 최근 에이 작업을 수행해야했기 때문에 누군가 도움이 될 수 있다고 생각했습니다 (Chrome에서 기본적으로 숫자 입력이 작동하는 방식이기 때문에).

에 대해 사용 가능한 모든 값을 보려면 여기에서 값을 -moz-appearance찾을 수 있습니다 (mdn).

— 조쉬 크로 지어
소스
11

에서 SASS/ SCSS스타일, 당신은 다음과 같이 쓸 수 있습니다 :

input[type='number'] {
  -moz-appearance: textfield;/*For FireFox*/

  &::-webkit-inner-spin-button { /*For Webkits like Chrome and Safari*/
    -webkit-appearance: none;
    margin: 0;
  }
}

이 코드 스타일은에서 사용할 수 있습니다 PostCSS.

— AmerllicA
소스
7 
/* for chrome */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;}             


/* for mozilla */  
   input[type=number] {-moz-appearance: textfield;}
— 나빈 프라 카쉬
소스
3

29.0.1로 Firefox 업데이트 후 동일한 문제가 발생했습니다. https://bugzilla.mozilla.org/show_bug.cgi?id=947728

솔루션 : 그들은 (Mozilla guys)에 대한 "-moz-appearance"에 대한 지원을 도입하여이 문제를 해결했습니다 <input type="number">. " -moz-appearance:textfield;"를 사용하여 입력 필드와 연결된 스타일이 필요합니다 .

CSS 방식을 선호합니다 예 :-

.input-mini{
-moz-appearance:textfield;}

또는

인라인으로도 할 수 있습니다.

<input type="number" style="-moz-appearance: textfield">
— 아비 짓
소스
0

위의 답변과 scss의 Opera 에서 input [type = "number"]에서 화살표를 제거하는 방법 에서 몇 가지 답변을 혼합 했습니다.

input[type=number] {
  &,
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;

    &:hover,
    &:focus {
      -moz-appearance: number-input;
    }
  }
}

Tested on chrome, firefox, safari
— Darex1991
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.