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?
Related
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">
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]
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;
}
I'm trying to hide the standard arrow from the select dropdown list.
I've resolved it for all browsers, thanks to stackoverflow.com, but still can't remove or hide it for the Opera (my current version is Opera 12.16).
Pure css solution is needed.
select {
background: url(/path/to/the/arrow.png) no-repeat center right;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
/*IE*/
select::-ms-expand {
display: none;
}
/*FF*/
#-moz-document url-prefix() {
select {padding-right:5px;}
}
OK, I didn't find the solution. However, what I did is I applied the style background-image:none; for Opera only so only one standard arrow is displayed in Opera.