HTML5 숫자 입력 스핀 상자를 숨길 수 있습니까?

브라우저와 같은 일부 브라우저 (예 : Chrome)에서 숫자 유형의 HTML 입력을 위해 렌더링하는 새로운 스핀 상자를 숨기는 일관된 방법이 있습니까? 위쪽 / 아래쪽 화살표가 나타나지 않도록 CSS 또는 JavaScript 방법을 찾고 있습니다.

<input id="test" type="number">

이 CSS는 웹킷 브라우저의 스핀 버튼을 효과적으로 숨 깁니다 (Chrome 7.0.517.44 및 Safari 버전 5.0.2 (6533.18.5)에서 테스트).

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

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

<input type="number" step="0.01" />

인스펙터 (웹킷, Firefox 용 Firebug)를 사용하여 관심있는 요소와 일치하는 CSS 속성을 찾고 유사 요소를 찾을 수 있습니다. 이 이미지는 입력 요소 type = "number"에 대한 결과를 보여줍니다.

Firefox 29는 현재 숫자 요소에 대한 지원을 추가하므로 다음은 웹킷 및 moz 기반 브라우저에서 스피너를 숨기는 스 니펫입니다.

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

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

<input id="test" type="number">

짧은 답변:

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

더 긴 답변 :

기존 답변에 추가하려면 ...

Firefox :

Firefox의 현재 버전 에서 이러한 요소 에 대한 -moz-appearance특성 의 (사용자 에이전트) 기본값 은 number-input입니다. 이를 값으로 변경 textfield하면 스피너가 효과적으로 제거됩니다.

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

경우에 따라 스피너를 처음 에 숨기고 호버 / 포커스에 표시 하기를 원할 수 있습니다 . (현재 Chrome의 기본 동작입니다). 그렇다면 다음을 사용할 수 있습니다.

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

<input type="number"/>

크롬:

현재 Chrome 버전 에서 이러한 요소 에 대한 -webkit-appearance속성 의 (사용자 에이전트) 기본값 은 이미 textfield입니다. 스피너를 제거하기 위해, -webkit-appearance속성 값의 요구가 변경 될 none온 ::-webkit-outer-spin-button/의 ::-webkit-inner-spin-button의사 클래스 (그것은이다 -webkit-appearance: inner-spin-button기본적으로).

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

<input type="number" />

그 밖으로 그것의 가치가 가리키는 margin: 0에서 마진을 제거하는 데 사용됩니다 나이가 크롬의 버전.

현재이 글을 쓰는 시점에서 '내부 스핀 버튼'의사 클래스의 기본 사용자 에이전트 스타일은 다음과 같습니다.

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}

Apple의 모바일 Safari 코딩 경험 가이드에 따르면 다음을 사용하여 iPhone 브라우저에 숫자 키보드를 표시 할 수 있습니다.

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

pattern의는 \d*또한 작동합니다.

input type="tel"대신 사용해보십시오 . 숫자가 표시된 키보드가 나타나며 스핀 상자가 표시되지 않습니다. JavaScript 또는 CSS 또는 플러그인이나 다른 것이 필요하지 않습니다.

숫자를 입력 할 때 스피너를 제거하려면이 CSS 만 추가하십시오.

/* For Firefox */

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



/* Webkit browsers like Safari and Chrome */

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

이 문제와 input[type="datetime-local"]비슷한 문제가 발생했습니다.이 문제와 비슷합니다.

이런 종류의 문제를 극복 할 수있는 방법을 찾았습니다.

먼저 "DevTools-> 설정-> 일반-> 요소-> 사용자 에이전트 그림자 DOM 표시"를 통해 크롬의 그림자 루트 기능을 켜야합니다.

그런 다음 그림자 가있는 모든 DOM 요소를 볼 수 있습니다 ( 예 <input type="number">: 그림자가있는 DOM이있는 전체 요소는 다음과 같습니다).

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

그리고이 정보에 따르면 @Josh가 말한 것처럼 원치 않는 요소를 숨기도록 CSS를 작성할 수 있습니다.

당신이 요구 한 것은 아니지만 스핀 박스가있는 WebKit의 포커스 버그로 인해이 작업을 수행합니다.

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

필요한 것을 도와 줄 아이디어를 줄 수 있습니다.

이것은 더 나은 대답입니다. 마우스 오버 및 마우스 오버없이 제안하고 싶습니다.

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

Safari 에서이 작업을 수행하기 위해 웹 키트 조정에! important를 추가하면 스핀 버튼이 숨겨집니다.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

Opera 용 솔루션을 만드는 데 여전히 문제가 있습니다.

우분투 용 Firefox에서는

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

나를 위해 트릭을했다.

첨가

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

나를 이끌 것입니다

알 수없는 의사 클래스 또는 의사 요소 '-webkit-outer-spin-button'. 잘못된 선택기 때문에 규칙 세트가 무시되었습니다.

내가 시도 할 때마다. 내부 스핀 버튼과 동일합니다.

스피너를 원하지 않을 때 자바 스크립트로 입력 한 숫자를 텍스트 입력으로 변경할 수 있습니다.

document.getElementById('myinput').type = 'text';

사용자가 텍스트를 입력하지 못하게합니다.

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

그런 다음 스피너를 원할 경우 자바 스크립트를 다시 변경하십시오.

document.getElementById('myinput').type = 'number';

그것은 내 목적을 위해 잘 작동했습니다

WebKit 및 Blink 기반 브라우저 및 모든 종류의 브라우저에서 다음 CSS를 사용하십시오.

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

이 일이 필요했습니다

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield

여분의 라인은 appearance: none저에게 핵심이었습니다.

나는 다음을 사용하여 매우 간단한 해결책을 찾았습니다.

<input type="text" inputmode="numeric" />

이것은 대부분의 브라우저에서 지원됩니다 : https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode