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]
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 used css to style my select arrow, and it's displaying how I want it to in chrome. However, in internet explorer, it is displaying both the default arrow AND my restyled arrow. I'm fine with displaying either one in internet explorer, but not both. Any idea how to keep it as is in chrome, but change it to one or the other in internet explorer?
Here's my css:
select{
background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-border-radius: 0px;
appearance: none;
outline-width: 0;
}
This is how it looks in chrome:
This is how it looks in internet explorer:
Update, using schylake's fix below - default arrow has disappeared, but would like the custom arrow moved to the right:
The appearance is not supported in IE. refer to this for more information about it.
https://www.w3schools.com/cssref/css3_pr_appearance.asp
The reason it works in chrome is because of this line
-webkit-appearance
This will work on IE10+. Found this while researching the same issue
select::-ms-expand {
display: none;
}
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.
until safari 5.1 and maybe 6.0 it was possible to hide the slider-thumb via css
input[type=range].onoff::-webkit-slider-thumb,
input[type=range].onoff::-moz-slider-thumb,
input[type=range].onoff::slider-thumb {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
height:20px; width:20px;
background-color:transparent;
}
worked also in chrome, ff and opera.
now with safari 6.1 and 6.1.1, firefox 25
this css is not hiding the slider-thumb anymore.
what did i miss?
is there a better, more valid code i could use to hide just the thumb?
no jquery solutions please, i work on a native javascript plugin to add touchable audio-wheels, working in different environments. maybe later i will translate this to jQ too.
okay testet..
looks like, the comma separated list of selectors and setting them all ot once is not working anymore. so valid code can be..
input[type=range].onoff::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range].onoff::-moz-slider-thumb {
-moz-appearance: none;
}
input[type=range].onoff::slider-thumb {
appearance: none;
}
but still in FF i can't hide the thumb, how?