On Firefox 28, I'm using <input type="number"> works great because it brings up the numerical keyboard on input fields which should only contain numbers.
In Firefox 29, using number inputs displays spin buttons at the right side of the field, which looks like crap in my design. I really don't need the buttons, because they are useless when you need to write something like a 6~10 digit number anyway.
Is it possible to disable this with CSS or jQuery?
type="number". You can use type="text" and the pattern attribute to set a regex to make sure it's a number.
type="number" is required for mobile browsers to show the numeric keyboard instead of the full keyboard.
<input type="tel"> it's only numbers and it doesn't include spinners.
type="text" is a bad idea because touch devices will show the wrong keyboard.
According to this blog post, you need to set -moz-appearance:textfield; on the 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; }
It's worth pointing out that the default value of -moz-appearance on these elements is number-input in Firefox.
If you want to hide the spinner by default, you can set -moz-appearance: textfield initially, and if you want the spinner to appear on :hover/:focus, you can overwrite the previous styling with -moz-appearance: number-input.
input[type="number"] { -moz-appearance: textfield; } input[type="number"]:hover, input[type="number"]:focus { -moz-appearance: number-input; }
I thought someone might find that helpful since I recently had to do this in attempts to improve consistency between Chrome/FF (since this is the way number inputs behave by default in Chrome).
If you want to see all the available values for -moz-appearance, you can find them here (mdn).
In SASS/SCSS style, you can write like this:
input[type='number'] {
-moz-appearance: textfield;/*For FireFox*/
&::-webkit-inner-spin-button { /*For Webkits like Chrome and Safari*/
-webkit-appearance: none;
margin: 0;
}
}
Definitely this code style can use in 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;}
Faced the same issue post Firefox update to 29.0.1, this is also listed out here https://bugzilla.mozilla.org/show_bug.cgi?id=947728
Solutions: They(Mozilla guys) have fixed this by introducing support for "-moz-appearance" for <input type="number">. You just need to have a style associated with your input field with "-moz-appearance:textfield;".
I prefer the CSS way E.g.:-
.input-mini{
-moz-appearance:textfield;}
Or
You can do it inline as well:
<input type="number" style="-moz-appearance: textfield">
This worked for me:
input[type='number'] {
appearance: none;
}
Solved in Firefox, Safari, Chrome. Also, -moz-appearance: textfield; is not supported anymore (https://developer.mozilla.org/en-US/docs/Web/CSS/appearance)
In 2021, there is a much better solution to make your firefox like Google Chrome. You should use focus and hover, too.
input[type="number"] {
appearance: none; /* textfield also works! */
}
input[type="number"]:focus,
input[type="number"]:hover {
appearance: auto;
}
for more information, please read the documentation
I mixed few answers from answers above and from How to remove the arrows from input[type="number"] in Opera in 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
-moz- to last to prevent override by none prefix attributes. ``` { appearance: none; -webkit-appearance: none; -moz-appearance: textfield; } ```
Follow WeChat
Success story sharing
Want to stay one step ahead of the latest teleworks?
Subscribe Now相似问题
- What characters can be used for up/down triangle (arrow without stem) for display in HTML?
- Can I hide the HTML5 number input’s spin box?
- Disable webkit's spin buttons on input type="number"?
- Force decimal point instead of comma in HTML5 number input (client-side)
- Is there any way to prevent input type="number" getting negative values?
- onchange event on input type=range is not triggering in Firefox while dragging
@-moz-document url-prefix() { ... }and it does what I want: hides the spinners in Firefox, where they look bad, but keep them alive in other browsers, including ones that bring up the numeric keyboard as the OP mentioned.