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

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 :

In current versions of Firefox, the (user agent) default value of the -moz-appearance property on these elements is number-input. Changing that to the value textfield effectively removes the spinner.

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

In some cases, you may want the spinner to be hidden initially, and then appear on hover/focus. (This is currently the default behavior in Chrome). If so, you can use the following:

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

<input type="number"/>

---

Chrome:

In current versions of Chrome, the (user agent) default value of the -webkit-appearance property on these elements is already textfield. In order to remove the spinner, the -webkit-appearance property's value needs to be changed to none on the ::-webkit-outer-spin-button/::-webkit-inner-spin-button pseudo classes (it is -webkit-appearance: inner-spin-button by default).

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

<input type="number" />

It's worth pointing out that margin: 0 is used to remove the margin in older versions of Chrome.

Currently, as of writing this, here is the default user agent styling on the 'inner-spin-button' pseudo class:

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

---

According to Apple’s user experience coding guide for mobile Safari, you can use the following to display a numeric keyboard in the iPhone browser:

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

A pattern of \d* will also work.

---

Try using input type="tel" instead. It pops up a keyboard with numbers, and it doesn’t show spin boxes. It requires no JavaScript or CSS or plugins or anything else.

---

Only add this css to remove spinner on input of number

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

---

I've encountered this problem with a input[type="datetime-local"], which is similar to this problem.

And I've found a way to overcome this kind of problems.

First, you must turn on chrome's shadow-root feature by "DevTools -> Settings -> General -> Elements -> Show user agent shadow DOM"

Then you can see all shadowed DOM elements, for example, for <input type="number">, the full element with shadowed DOM is:

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

And according to these info, you can draft some CSS to hide unwanted elements, just as @Josh said.

---

Not what you asked for, but I do this because of a focus bug in WebKit with spinboxes:

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

It might give you an idea to help with what you need.

---

This is more better answer i would like to suggest on mouse over and without mouse over

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

---

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

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

---

To make this work in Safari I found adding !important to the webkit adjustment forces the spin button to be hidden.

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에 대한 솔루션을 찾는 데 여전히 문제가 있습니다.

---

Ubuntu 용 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';

내 목적에 잘 맞았다

---

CSS 파일에서 다음과 같은 간단한 코드를 사용할 수 있습니다.

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

참고 URL : https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box