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;
}
Related
I recently built an app, but after deployment, I noticed that Safari seems to be loading css differently. Everywhere I have a type="button", safari adds an odd white box around the element. It looks terrible. I've looked around on the internet and found this:
input[type="text"],
input[type="button"] {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
It's the closest I've come to finding a solution, but it doesn't work.
Site: timetrackers.net
I'm guessing you're talking about Safari's default :focus styling.
You can use this CSS to get rid of it:
input[type="text"]:focus,
input[type="button"]:focus {
outline-width: 0;
}
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 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;
}
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]