Hide Arrows From mat-form-field in Angular Material - html

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

Related

overwrite -moz-appearance while using bootstrap

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?

Input field on Chrome shows scrollbar

I have tried searching but was not able to locate the subject on this.
I am building simple 2 num inputs and one button form, but I have noticed that Chrome displays scrollbar on hover, focus, or active and I am not able to remove it
<input type="number" id="hValue" class="userValues" value="Enter Height" onfocus="this.value=''">
I have tried using CSS below, but still no effect:
overflow: hidden;
resize: none;
you can use this to hide arrows from Input Number
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}

Remove browser specific style

Browsers have added additional functionality/styling to input[type=number] in the form of up and down buttons.
I was able to remove this styling in Chrome since we're able to view the shadow DOM and figure out an element's corresponding identity.
However, Firefox is another story. Is anybody aware of any way to remove the up and down buttons on input[type=number] in Firefox?
I came across this post, but the extension wasn't sufficient.
/* 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;
}

Turn Off HTML5 Number Input Spinners

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/

How to style the spinner from a number input in Firefox

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