Ẩn Spinner trong Số đầu vào - Firefox 29

Trên Firefox 28, tôi đang sử dụng <input type="number">các công trình tuyệt vời vì nó hiển thị bàn phím số trên các trường nhập chỉ chứa số.

Trong Firefox 29, sử dụng đầu vào số hiển thị các nút xoay ở bên phải của trường, trông giống như crap trong thiết kế của tôi. Tôi thực sự không cần các nút, bởi vì chúng vô dụng khi bạn cần viết một cái gì đó giống như một số 6 ~ 10 chữ số.

Có thể vô hiệu hóa điều này với CSS hoặc jQuery?

Theo bài đăng trên blog này , bạn cần phải thiết lập -moz-appearance:textfield;trên 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"/>

Thật đáng để chỉ ra rằng giá trị mặc định của -moz-appearancecác thành phần này nằm number-inputtrong Firefox.

Nếu bạn muốn ẩn spinner theo mặc định, bạn có thể đặt -moz-appearance: textfieldban đầu và nếu bạn muốn spinner xuất hiện trên :hover/ :focus, bạn có thể ghi đè lên kiểu dáng trước đó -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"/>

Tôi nghĩ ai đó có thể thấy hữu ích vì gần đây tôi đã phải làm điều này trong nỗ lực cải thiện tính nhất quán giữa Chrome / FF (vì đây là cách đầu vào số hoạt động theo mặc định trong Chrome).

Nếu bạn muốn xem tất cả các giá trị có sẵn cho -moz-appearance, bạn có thể tìm thấy chúng ở đây (mdn).

Trong SASS/ SCSSstyle, bạn có thể viết như thế này:

input[type='number'] {
  -moz-appearance: textfield;/*For FireFox*/

  &::-webkit-inner-spin-button { /*For Webkits like Chrome and Safari*/
    -webkit-appearance: none;
    margin: 0;
  }
}

Chắc chắn phong cách mã này có thể sử dụng trong 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;}

Đối mặt với vấn đề tương tự bài đăng cập nhật Firefox lên 29.0.1, điều này cũng được liệt kê ở đây https://ormszilla.mozilla.org/show_orms.cgi?id=947728

Giải pháp: Họ (những người Mozilla) đã khắc phục điều này bằng cách giới thiệu hỗ trợ cho "-moz-ngoại hình" cho <input type="number">. Bạn chỉ cần có một kiểu được liên kết với trường đầu vào của bạn với "-moz-appearance:textfield; ".

Tôi thích cách CSS Ví dụ: -

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

Hoặc là

Bạn cũng có thể thực hiện nội tuyến:

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

Tôi đã trộn một vài câu trả lời từ các câu trả lời ở trên và từ Cách loại bỏ các mũi tên khỏi đầu vào [type = "number"] trong Opera trong 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

Điều này làm việc cho tôi:

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

Được giải quyết trong Firefox, Safari, Chrome. Ngoài ra, -moz-appearance: textfield;không được hỗ trợ nữa ( https://developer.mozilla.org/en-US/docs/Web/CSS/appparent )