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

Program / 글쓴이

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

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

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

답변

이 블로그 게시물 에 따르면에 설정해야 -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"/>

스 니펫 확장

답변

-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).

답변

에서 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.

답변

/* 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;}

답변

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">

답변

위의 답변과
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

답변

이것은 나를 위해 일했다 :

    input[type='number'] {
    appearance: none;
}

Firefox, Safari, Chrome에서 해결되었습니다. 또한 -moz-appearance: textfield;더 이상 지원되지 않습니다 ( https://developer.mozilla.org/en-US/docs/Web/CSS/appearance )