Tôi có thể ẩn hộp quay số của đầu vào số HTML5 không?

Có cách nào nhất quán trên các trình duyệt để ẩn các hộp quay mới mà một số trình duyệt (như Chrome) hiển thị cho đầu vào HTML có số loại không? Tôi đang tìm kiếm một phương pháp CSS hoặc JavaScript để ngăn mũi tên lên / xuống xuất hiện.

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

CSS này ẩn hiệu quả nút quay cho trình duyệt webkit (đã thử nghiệm nó trong Chrome 7.0.517.44 và Safari Phiên bản 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" />

Bạn luôn có thể sử dụng trình kiểm tra (webkit, có thể là Fireorms cho Firefox) để tìm các thuộc tính CSS phù hợp cho các yếu tố bạn quan tâm, tìm kiếm các yếu tố Pseudo. Hình ảnh này hiển thị kết quả cho loại phần tử đầu vào = "số":

Firefox 29 hiện bổ sung hỗ trợ cho các thành phần số, vì vậy đây là đoạn trích để ẩn các spinners trong trình duyệt webkit và 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">

Câu trả lời ngắn:

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

Câu trả lời dài hơn:

Để thêm vào câu trả lời hiện có ...

Firefox:

Trong các phiên bản hiện tại của Firefox, giá trị mặc định (tác nhân người dùng) của thuộc -moz-appearancetính trên các thành phần này là number-input. Thay đổi điều đó thành giá trị textfieldcó hiệu quả loại bỏ spinner.

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

Trong một số trường hợp, ban đầu bạn có thể muốn spinner bị ẩn và sau đó xuất hiện trên hover / Focus. (Đây hiện là hành vi mặc định trong Chrome). Nếu vậy, bạn có thể sử dụng như sau:

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

<input type="number"/>

Trình duyệt Chrome:

Trong các phiên bản hiện tại của Chrome, giá trị mặc định (tác nhân người dùng) của thuộc -webkit-appearancetính trên các thành phần này đã có sẵn textfield. Để xóa spinner, -webkit-appearancegiá trị của thuộc tính cần được thay đổi thành nonetrên các lớp ::-webkit-outer-spin-button/ ::-webkit-inner-spin-buttongiả ( -webkit-appearance: inner-spin-buttontheo mặc định).

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

<input type="number" />

Đáng để chỉ ra rằng margin: 0được sử dụng để xóa lề trong các phiên bản Chrome cũ hơn .

Hiện tại, khi viết bài này, đây là kiểu dáng tác nhân người dùng mặc định trên lớp giả 'nút quay trong':

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

Theo hướng dẫn mã hóa trải nghiệm người dùng của Apple cho Safari di động , bạn có thể sử dụng cách sau để hiển thị bàn phím số trong trình duyệt iPhone:

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

Một patternsố \d*cũng sẽ làm việc.

Hãy thử sử dụng input type="tel"thay thế. Nó bật lên một bàn phím với các số và nó không hiển thị các hộp quay. Nó không yêu cầu JavaScript hoặc CSS hoặc plugin hoặc bất cứ thứ gì khác.

Chỉ thêm css này để loại bỏ spinner trên đầu vào của số

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

Tôi đã gặp vấn đề này với một input[type="datetime-local"], tương tự như vấn đề này.

Và tôi đã tìm ra cách khắc phục loại vấn đề này.

Trước tiên, bạn phải bật tính năng gốc bóng của chrome bằng "DevTools -> Cài đặt -> Chung -> Thành phần -> Hiển thị bóng của tác nhân người dùng DOM"

Sau đó, bạn có thể thấy tất cả các phần tử DOM bị bóng , ví dụ, <input type="number">phần tử đầy đủ với DOM bị bóng là:

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

Và theo những thông tin này, bạn có thể phác thảo một số CSS để ẩn các yếu tố không mong muốn, giống như @Josh nói.

Không phải những gì bạn yêu cầu, nhưng tôi làm điều này vì một lỗi tập trung trong WebKit với 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";
}

Nó có thể cung cấp cho bạn một ý tưởng để giúp đỡ với những gì bạn cần.

Đây là câu trả lời tốt hơn tôi muốn đề xuất trên chuột và không có chuột

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

Để thực hiện công việc này trong Safari, tôi thấy việc thêm! Điều quan trọng đối với điều chỉnh webkit buộc nút quay bị ẩn.

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

Tôi vẫn gặp khó khăn khi tìm ra giải pháp cho Opera.

Trên Firefox cho Ubuntu, chỉ cần sử dụng

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

đã lừa tôi

Thêm

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

Sẽ dẫn tôi đến

Lớp giả không xác định hoặc phần tử giả '-webkit-outs-spin-button'. Ruleset bị bỏ qua do bộ chọn xấu.

mọi lúc tôi đều cố gắng Tương tự cho nút quay bên trong.

Có thể thay đổi đầu vào số bằng javascript thành nhập văn bản khi bạn không muốn một công cụ quay vòng;

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

và ngăn người dùng nhập văn bản;

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

sau đó có javascript thay đổi nó trở lại trong trường hợp bạn muốn có một spinner;

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

nó hoạt động tốt cho mục đích của tôi

Trong các trình duyệt dựa trên WebKit và Blink & All Kind Of Browser sử dụng CSS sau:

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

Tôi cần cái này để làm việc

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

Dòng bổ sung appearance: nonelà chìa khóa cho tôi.

Tôi tìm thấy một giải pháp siêu đơn giản bằng cách sử dụng

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

Điều này được hỗ trợ là hầu hết các trình duyệt: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attribut/inputmode