입력 번호에서 위쪽 및 아래쪽 화살표 버튼(스피너) 숨기기 - Firefox 29

입력 번호에서 위쪽 및 아래쪽 화살표 버튼(스피너) 숨기기 - Firefox 29

파이어폭스 28에서는<input type="number">숫자만 포함해야 하는 입력 필드에 숫자 키보드가 표시되므로 유용합니다.

파이어폭스 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파이어폭스에서.

기본적으로 스피너를 숨기려면 다음과 같이 설정할 수 있습니다.-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"/>

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

사용 가능한 모든 값을 보려면-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;}

Firefox를 29.0.1로 업데이트한 후에도 동일한 문제가 발생했습니다. 이 문제도 여기에 나열되어 있습니다. https://bugzilla.mozilla.org/show_bug.cgi?id=947728

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

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

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

또는

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

<input type="number" style="-moz-appearance: textfield">

이것은 저에게 효과가 있었습니다.

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

파이어폭스, 사파리, 크롬에서 해결되었습니다.또한.-moz-appearance: textfield;더 이상 지원되지 않습니다(https://developer.mozilla.org/en-US/docs/Web/CSS/appearance) ).

2021년에는 구글 크롬과 같은 파이어폭스를 만들 수 있는 훨씬 더 나은 솔루션이 있습니다.여러분은 포커스와 호버도 사용해야 합니다.

input[type="number"] {
    appearance: none; /* textfield also works! */
}

input[type="number"]:focus, 
input[type="number"]:hover {
    appearance: auto;
}

자세한 내용은 설명서를 참조하십시오.

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

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

언급URL : https://stackoverflow.com/questions/23372903/hide-up-down-arrow-buttons-spinner-in-input-number-firefox-29