I was trying to disable the input spinner but all I could fine here was to hide it, like this:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
But how can it be completely disabled ?
Try this:
/* 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;
}
Source: https://blog.rudolphk.co.za/css-tip-remove-spinner-on-input-of-number-9fc4d9cac121
Using this Jquery you can disable it, so the mouse wheel wont change the numbers
$(':input[type=number]').on('mousewheel', function(e){
$(this).blur();
});
Source: https://css-tricks.com/snippets/css/turn-off-number-input-spinners/
Related
I am using bootstrap version 5.2 on my website and try to get rid of the arrows in a number input field. Therefore i copied the following code to my css file:
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox TODO: why does this not work? */
input[type=number] {
-moz-appearance: textfield !important;
}
Which works perfectly fine in Chrome but has no effect in Firefox. The inspector shows the following attributes:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
which overwrite each other. To get the desired behaviour I have to remove the line
appearance: none;
and than change the second line to
-moz-appearance: textfield;
How can I achieve this in my css file?
I am using mat-form-field for telephone number input. Here is my base code for that.
<mat-form-field class="full-width">
<input matInput type="number" placeholder="Telefonnummer für Rückruf" value="" [(ngModel)]="this.inputValues.phone">
</mat-form-field>
By the way, this component is showing Arrow/Spin buttons when I mouse hover on it.
Please let me know how I can customize this component so that it will not show Arrow/Spin buttons anymore.
Kind regards,
Jie
The arrow/spinner occurs whenever the input type is number. It can removed using css/scss. This link provides example and also further information.
Try this css/scss code:
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
When you add the following CSS code to the style.css, it should be hidden.
/* Chrome, Safari, Edge, Opera */
input[matinput]::-webkit-outer-spin-button,
input[matinput]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[matinput][type=number] {
-moz-appearance: textfield;
}
I am looking at MDN for spinners (arrows for input type="number") and it says it is non standard. The way I remember is MDN also tell you what to use but in this case, it isn't.
My problem is that while I am using
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: textfield;
margin: 0;
}
It works for chrome but not for firefox. So I am guessing due to non-standard it is not applying, What is the "Standard" Workaround for it?
input[type=number]::-webkit-inner-spin-button this will work as a selector when browser is webkit otherwise none of styles within this selector will be applied.
input[type=number] {
-moz-appearance: textfield;
margin: 0;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
<input type="number">
I removed the regular input arrows with the following code:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
It works in all the browsers but the newest mozilla firefox. Am I doing something wrong or why the arrows wont dissapear?
Nevermind I already figured it out..
Here is the solution:
input[type=number] {
-moz-appearance:textfield;
}
Since a couple of versions (since 29 I think) Firefox adds spinner buttons to a number input. But they do not fit into my Bootstrap powered website. Is there a way to style these buttons so they look less ugly.
I don't think you can style them, but maybe hiding them will already help:
/* Hide spinners for Firefox */
input[type=number] {
-moz-appearance: textfield;
}
/* Hide spinners for Chrome */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}