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;
}
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;
}
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]
I am just wondering why the Zurb Foundation's select input works fine on their website:
foundation forms
And when I copy the excact code from their example and put on my website - there occurs a 'second arrow issue' on firefox:
The question is what would be the best fix for that issue.I use:
select {
background-image: none;
}
I am not sure if it is the best way to work around that, of course remembering to apply that code only for firefox.
Any ideas how to fix the problem without any 'hacks'?
It's seems to be a Firefox bug for version 30.0 and up on certain device. Unfortunately I have no work around... other than removing the arrow on the select box.
For me worked:
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
It is a fix for other browsers too.
Im using Firefox 26.0 and the select arrow doesn't show at all, just the standard dropdown arrow box.
Here is my solution to the issue:
#-moz-document url-prefix() {
select {
background-image: url(data:image/svg+xml;
base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
background-position: 100% center;
background-repeat: no-repeat;
padding: 0.5rem;
text-indent: 0.01px;
text-overflow: '';
}
}
Working example: JSFIDDLE
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?