In the current version of Chrome 36.0.1... there's an annoying bug where the dropdown arrow is always black, making it useless if it's in a container with a quite dark background.
The select element's color attribute isn't applied either (though it works on the text of the closed element itself), nor is the inherited color. My searches always came up either useless or with tutorials to replace the whole thing, but that would be overkill.
Since there's a ton of legacy selectors still present to style elements like the scrollbar, is there also one to just define the color of the arrow without having to replace everything but the damn kitchen sink?
Thanks in advance for your replies.
Unfortunately, there is no simple way to change the default select menus without completely overriding them. The individual browsers all render forms differently, and this is a known pain-in-the-ass.
Related
So, I'm using a select bar in a site of mine. I'm trying to change the background color of the options when hovered over. Also, if anyone knows a good way to style the vertical slider, that'd be awesome.
Here's a fiddle of what I'm trying to do:
http://jsfiddle.net/zof9suLz/
<select class="scrollbar" name="mydropdown" onchange="document.location = this.value">
<option value="#">Search by State</option>
<option class="scrollbar-option" value="http://alabamaadoptivefamilies.com/">Alabama</option><br />
The odd thing is that when you go down the list using a scrollwheel, and land on an option, the correct color comes up until you move your mouse again.
I just need to change the background color when you hover over the options, but I can't get it to do what I want, haha.
My site url is: statesites.wpengine.com
What you describe seems to me like perfectly valid behaviour, all the time I saw select in any webpage it behaved like that, i.e. background color on option being hovered over after scrolling only changes after moving the mouse. Just to verify I tried the demo on w3 pages (try it yourself) and added more options for scrollbar to appear - it results in the same behaviour, it is for sure not caused by conflicting styles.
As for customizing the scrollbar style, that appears to be a duplicate of this SO question, quoting the most upvoted answer:
Scrollbar CSS styles are an oddity invented by Microsoft developers.
They are not part of the W3C standard for CSS and therefore most
browsers just ignore them.
Think I know the answer to this one, but just thought there may be some genius out there whos know of a way to do this...
Basically I am making a site editor kind of thing and it would be amazingly handy if I could replicate the way Firebug and the Chrome console highlights elements when you hover over their code in the html/elements tabs of those inspectors...
Its not something I can do with background effects because that does not highlight the whole Div (the contents show above the highlight) and I don't think there is anyway of making a div overlay over the top of all the content but have it not block mouseovers on underlying elements...
Anyone any ideas? Is there any browser specific code that achieves this kind of thing?
In general, Firefox extensions are mostly JavaScript. Since Firebug is BSD licensed, you can browse its source code on its project site. Maybe you'll find the relevant code and get an idea how to solve your specific task.
You could add an outline in CSS on mouseover - that would highlight the element without changing its position, as outline does not effect layout. A box-shadow would also work similarly.
In fact, it looks to me like Firebug adds a dark bluish box-shadow to elements to highlight them.
The following lines are included in the HTML5 Boilerplate template by default:
::-moz-selection{background:#fe57a1;color:#fff;text-shadow:none;}
::selection{background:#fe57a1;color:#fff;text-shadow:none;}
However, I want to keep the selection color as the OS default (blue in Windows, I think it's brownish orange in Ubuntu). If I leave out the background property, there will be no background.
Since this selector is not officially supported for CSS, being removed from CSS3 and not currently in the draft for CSS4, there really isn't much documentation on how exactly the selector should be applied.
As defined by the selector, it is meant to override the system's default text selection colors. The browsers have apparently taken this literally. By specifying ::selection, those colors are immediately overwritten, even if you haven't specified them. The problem is the system's defaults are not part of CSS. The browser is seeing your declaration and thinking "ignore the system's default, use what's in this declaration instead." Since you don't have colors specified there, no colors are applied (background is none and color is inherit). Whoops, kind of hard to tell your text is selected, huh?
This is only a theory of what appears to be happening since, as I said, there really is no documentation on what actually happens, or what is supposed to happen.
Honestly, the only way you'd really know for sure is to look at the source code and see what it's doing when it sees that selector. Maybe asking someone on the development team for one of these browsers would be easier. Either way would still be difficult. Maybe you could submit a bug report and they can delve into the issue a little more...
I want to stlye a select element. i.e to constrain its width to a specified value,background-color.
I also want to be able to style the option set(via Option constructor)
Is it possible. I am using IE6.
Just a note. Because IE6 renders the drop down box using Windows Shell ListBox and Combobox controls, many styling features do not work. I wish I could find an old link out ther for you but I cant seem to find it. I belive background-color will not work, I know border color does not work in ie 6.
Here is the best link I could find. It explains some but not all
http://blogs.msdn.com/b/ie/archive/2006/01/17/514076.aspx
I have a label with a tooltip attribute for rollover effect. This works all great. However, it seems to get hidden behind any dropdown lists that are nearby. I have tried adjusting the z-index, without any luck. This issue does not appear in firefox, and I have not tested it in later versions of IE.
I realize this is probably due to IE6s poor css standards-compatibility, but how can I get around this?
Not the best because it requires javascript/jQuery library, but there's a workaround:
http://dhtmlgrounds.wordpress.com/2008/12/23/ie6-select-box-z-index-bug/
IE6 has a know error that selects always end up the highest in the z order...
Custom select control optional?
Have a look at this
Another idea is to use the ajaxtoolkit autocomplete?
The select dropdown in IE6 is implemented as a Windows control, so the browser isn't really drawing it. Thus, it doesn't support features like z-index. One possible solution is to hide all select boxes on the page when you show your tool-tip. Another option is a custom dropdown, which you can find in libraries like Ext.
As astander and MikeWyatt said, selects in IE are topmost. There are two paths to work-around this problem:
Use a custom select box, rendered with divs, etc. This is rather cumbersome, since you won't be able to replicate all of the drop-down functionality.
Place an <IFRAME> under the tooltip (tooltip z-index > iframe z-index). This will work-around the problem, yet you have to worry about the positioning of the iframe overlay.