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;
}
Related
I am new to using front-end designs. I have tried to convert a input textbox of type number as a blankline. Added below css style
input[type=number] {
background: transparent;
border: none;
border-bottom: 1px solid #000000;
outline: none;
}
And using bootstrap form-control css for more responsiveness
class="form-control form-control-sm"
But my screen shows the line with navigation bar end of the line as below. Also I need to limit max of 4 numbers only on this number box ? How to set fixed size and remove the unnecessary bar on the right side?
The bar is called a "spinner", you remove it like this:
/* 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;
}
You can limit the number of characters with the maxlength="4" attribute on the input (you can't do that with CSS).
Additionally, if you don't want those little curves at either side, make sure you add border-radius: 0; to your input.
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;
}
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;
}
Despite my search I just found related subject about removing or hiding the arrow but not showing it on hover.
The goal is to hide the HTML Select Arrow for all latest major browser, Edge, Chrome and IE 11 but showing it when mouse hover.
Right now I've been able to make it work in IE 11 perfectly with the following code however it's not working fine in Chrome and Edge. Any insight on what to change or add in this code to make it cross browser ?
select::-ms-expand {
display: none;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
}
select:hover {
-webkit-appearance: menulist;
-moz-appearance: menulist;
}
select:hover::-ms-expand {
display: block;
}
<select>
<option>Marc Roussel</option>
<option>Gilles Lavoie</option>
<option>Roger Maheu</option>
</select>
Use -webkit-appearance: menulist.
or appearance: none for modern browsers:
See http://trentwalton.com/2010/07/14/css-webkit-appearance/ for the whole list.
[IMO, from a user point of view, it's a strange requirement to turn something standard and "normal" to something specific and surprising]
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;
}