Customized select dropdown background image is not working in lastest version of Firefox 30 but other browsers it's working fine(Chrome, Opera, IE11, Safari).
Below styles were working fine with Firefox 21 to 29 but in Firefox 30 its not working.
select {
background: url(dropdown_arw.png) no-repeat right center;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 90px;
text-indent: 0.01px;
text-overflow: "";
}
sample page -
http://kvijayanand.in/jquery-plugin/test.html
It may be that firefox and other browsers do not support a background images for select lists. I have tried to put a background for a select list in the past but it only works in some browsers. This is my best guess. You could try googling it if you already haven't.
Known bug since 2011...
Mozilla Official - BUGZILLA
I'm scared that you cannot simply do that via CSS. You should check something like jQueryUI
Related
I'm working on a contact form where the select inputs are designed to have white text on a black background. The desired styles are being applied correctly in every instance except when accessed via Safari or Firefox on either an iPhone or iPad.
The relevant CSS Script is as follows:
select{
-webkit-appearance: none;
color: white !important;
}
Is there a particular reason that these browsers may not be processing this style? And how would I circumnavigate it?
*edited as both Firefox and Safari express this same issue
This type of styling is not currently supported by WebKit browsers on Mac OS X. You may find some more ideas here: Pure CSS solution to styling specific options in Webkit based browsers?.
Have you tried styling the option?
select option {
color: white;
}
I'm working on a website that will be viewed across three browsers - Chrome, FireFox, and Safari (both desktop and iPad).
I am trying to change the color of a disabled field on all browsers, so I have been using the following code:
input:disabled {
color: black;
}
<input value="testing" disabled></input>
I want the color of the disabled text to show as black. This works perfectly in Chrome and FireFox, but in Safari, it's still showing up as gray. Can anyone give any suggestions on how to change this field in Safari?
Solved this by adding the following to my CSS:
-webkit-text-fill-color: black;
Hope this helps someone else one day!
I'm using the meter element to display a star rating from 0 - 5. I got it to work great on Chrome, sort of okay in Firefox, but can't quite get it to work properly in Safari.
Here is a codepen
For Safari, to properly display the styled meter, I have to add
meter {
-webkit-appearance: none;
}
And then everything works. However, once doing that, it ceases to work in Chrome because Chrome will just render the content within the meter and cease to show it completely. Has anyone gotten around this?
P.S. Also, does anyone know why I can't set it like this:
&::-webkit-meter-bar,
&::-webkit-meter-optimum-value,
&::-moz-meter-bar {
//code here
}
And instead have to break it up?
&::-webkit-meter-bar,
&::-webkit-meter-optimum-value {
//code here
}
&::-moz-meter-bar {
// code here
}
Much appreciated if anyone has any insight :)
I can not test on Safari
But I would try the following (It works in Chrome, at least)
meter {
-webkit-appearance: none;
-webkit-appearance: meter;
}
Chrome has a built-in style of meter.
That's why when you set none it stops to work. Hopefully, Safari will understand none, won't understand meter and will keep the first style.
I have gone with a hacky way to target only Safari. This allows my styled meter to work across Firefox, Safari and Chrome. Have not managed to figure out why I need to separate the -webkit and -moz styles. Perhaps in the future when all the browsers implement the element in the same way things will be better.
#media only screen and (-webkit-min-device-pixel-ratio: 1) {
meter:not(:root:root) {
appearance: none;
}
}
I had the same issue and this worked for me:
-webkit-appearance: meter;
-moz-appearance: none;
appearance: none;
If you set border-color: transparent for the meter element it works in Safari, don’t ask me why.
Here is a working Codepen for your example:
https://codepen.io/receter/pen/KKQmBLP
Edit: border: 0; works as well and is probably better.
Ok, so this has been annoying me now for some time and I can not figure out what is causing this. I am wondering if anyone else is having this issue or noticed this.
In my css I have the html select options styled to look similar to this
On some computers it looks like how I've styled it and on some it appears something is overriding the style and then it looks like this
Some facts so far to help determine what is causing this.
All the computers I've tested are running windows 7.
My main pc that has numerous programs installed doe not have this issue.
My laptop has this issue.
My small pc that has a clean install with very few programs has this issue, also does not have any adobe products installed.
On the PC's with the issue, if I do a refresh in firefox the issue is fixed for about 5-10 min and then comes back.
If this were a CSS issue why would refreshing firefox temporarily fix and then later come back?
This leads me to think that some background plugin or setting is getting fetched after a refresh.
Could this be some other application on windows causing this?
Can someone tell me if they can reproduce this issue and also how to fix this and what is causing it?
Here is my CSS
SELECT {
color: #555558;
font-size: 16px;
margin: 0px 0px 8px 12px;
padding: 2px 0px 2px 5px;
width: 203px;
}
html
<select>
<option> - Select a Page - </option>
<option>Home Page</option>
<option>About Us</option>
<option>Camping Tips</option>
</select>
I posted several months ago regarding this issue however now the issue is not related to the version of firefox or CSS so the answers provided are misguided. Did Firefox 48 remove ability to style the select element?
Here is a list of plugins, as stated above, default installation produces this issue.
Please try this code
/* FIREFOX FIX OF UGLY SELECT BOXES */
#supports (-moz-appearance:none) {
select
{
-moz-appearance:none !important;
background: transparent url('data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==') right center no-repeat !important;
background-position: calc(100% - 5px) center !important;
}
}
Thanks
This appears to be a bug that appeared since the release of multi-process Firefox. More info about Electrolysis here: https://wiki.mozilla.org/Electrolysis
If you're using Firefox 48 or later, you might be using e10s already. Check about:support and look for a number higher than 0 in the "Multiprocess Windows" entry.
Chances are: the computers affected are due to Multiprocess being enabled. This issue is being tracked on Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=910022
The issue should resolve itself with the release of Firefox 54.
Ok, so the solution here is to disable -> Multiprocess Windows
type about:config in the browser
then search for browser.tabs.remote.autostart (mine had a browser.tabs.remote.autostart.2)
change this to FALSE then restart the browser
this will make firefox run Multiprocess Windows disabled which fixes the issue
I know this is an old thread but the behavior still exists (FF 100 on OSX).
Look at this pagination bar:
Note also the larger height of the div with the select in it :-(
What I have done to resolve this: set a border on the select and set the background color to white.
select {
border: 1px solid #ddd;
border-radius: 3px;
background-color: white;
padding: 0px;
}
Now it looks like this:
Looks the same in Chrome.
test code :
-webkit-appearance: none; /* Remove style Chrome */
-moz-appearance: none; /* Remove style FireFox */
appearance: none; /* Remove style FireFox*/
I have styled my select boxes, but i can still see the arrow in my select box in firefox, i have set css so:
background:transparent;
content:'';
apperiance:none;
Thats work on Chrome, but on Firefox i still see default arrow, is possible to delete it also on Firefox?
This should remove the arrow in selects in Chrome, Firefox, Safari, and IE10.
.poa-select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
text-indent: .01px;
text-overflow: "";
}
.poa-select::-ms-expand {
display: none;
}
Ideas taken from here and here.
Unfortunately there isn't yet a cross-browser compatible route of styling form elements with CSS: it's not usually left to the designer to have control over their appearance/behaviour so form elements are notoriously difficult to style. Many browsers specifically do not allow you to style them at all!
If you need to get a consistent look across all browsers, the only route is to use JavaScript to replace the form element in-view with stylised HTML elements.
Here's an article that lists a few of the options available for you: http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/
The trick that works for me is to make select width more than 100% and apply overflow:hidden
select {
overflow:hidden;
width: 120%;
}
The answer from here : How to remove the arrow from a tag in Firefox
Use the pointer-events property.
The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it. [see this post]
Here is a working FIDDLE using this method.
Also, in this SO answer I discussed this and another method in greater detail.