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
Related
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.
Firebug is great, and allows me to see all the CSS applied to an element in the DOM that you select, but either you can:
a) View it line by line, as defined in the CSS, in the applied order (very useful but not what I'm looking for) or
b) View it "computed", which is all CSS rules and the values that this element has.
What I want is a tool or extension that allows me to select an element and would show me, in copy-pastable form, all the CSS that's been defined for that element. If the element has font-style:normal just because it's the default for that element, I don't want that there (Firebug shows all this in computed view).
Basically I want to be able to:
I see an element I'd like to replicate on a website (like a button) exactly in my own website.
Use this tool to get a bunch of CSS applied to that element.
Paste on my own CSS.
Get the same looking element in my website. Yay!
Any ideas?
Switch to Chrome default element inspector (press F12), it has all that you need. You'll find everything in the Computed Style panel, including a useful "Show inherited" checkbox
I know the question is almost 4 years old, but if there is someone looking for it today, there's a Chrome extension that handles it. https://github.com/kdzwinel/SnappySnippet
It adds a new tab in Chrome Inspector and you just need to click a button to get all html and css of the selected element and its children. Then you can export it to codepen, jsfiddle and jsbin, or copy and paste.
Google Chrome has tools like Firebug built in called "Chrome Developer Tools". It is extremely powerful from my experience and I switched from Firefox/Firebug to Chrome about a year ago. There are several different ways to get the developer tools up. You can find detailed documentation at https://developers.google.com/chrome-developer-tools/docs/overview
When you have the Chrome developer tools open to the elements tab with an element selected, you can expand the computed styles area on the right and see all styles that make up that element.
If the specific style has an expandable triangle to its left, you can find out what stylesheet and where the styling comes from.
You don't need any extensions for that, the built-in inspector in Firefox can do that. Right-click the element, choose "Inspect Element". Click the Style button in the bottom toolbar - and there it is, a sidebar with all the styles applied to that element.
I have tried to calculate it via window.getComputedStyle and it is needed to be optimized to shake out unnecessary style properties. https://github.com/aleen42/DOM-mirror
I've tried SnappySnippet and found CSSSteal to be much better. It will grab just the CSS, and will do so in the same format as the document has it, unlike SnappySnippet.
There's an API on window Object >> window.getComputedStyle(DOMElement). This is if we need to work with computed styles programmatically.
MDN Docs for window.getComputedStyle
Good Luck...
You can try this extension https://getcssscan.com/?ref=beautifulcheckboxes_header but it is not free. I found this while I was finding a solution.
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.
Is there a way to bold only part of the text in a drop down list option or is this not possible?
I know that you can style the entire option with CSS, but that is not what I am looking for. And HTML inside of an option tag does not render.
Here would be an example of a drop down list item:
SomeID - Description of ID
You cannot do this. The most likely solution you'll find "out there" would be to add a surrounding span with hard coded style, but neither IE (7) nor Firefox (3.0.12) honor this. In fact, if you look at the generated source in Firefox, the internal span is completely stripped out.
What you can do is use a JavaScript solution to give you the appearance of a select without actually using a select.
EDIT: And here's a great HOWTO on how to do it: http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/
Not possible or at least not working cross browsers. If you really need this, you can create your own dropdown but I wouldn't recommend it.
I was wondering if there was a way of using HTML for the content of my ASP:Listbox items instead of plain text? The reason I ask is because I'd like to do some extra formatting on each item in the list. Not just font changes, but perhaps icons alongside the text or table rows to divide up each list item.
I'm vaguely aware that there may be a JavaScript solution to this problem, but I'm not having much luck with it, so if anyone can offer any suggestions or pointers that'd be great.
Edit: I should clarify that my target platform is .NET 2.0 and IE6.
Peter, that's very close to what I'm after. I've done this in my .NET app;
itemToAdd.Attributes.Add("style", "padding-left: 20px; background: url(" + image + ".gif) no-repeat left center;");
This works exactly as expected in FF3, but in IE the images are not displayed for some reason. Does anyone know of any issues surrounding the use of the background CSS element in IE?
there is another related stack-overflow question here:
Is there a way to enhance by CSS an HTML <select> and its <option> on IE 6?
From that it seems like you can;t set many of the css selectors for the OPTION element inside a SELECT.
You can set some things like color and background-color in IE6 but not other things like padding (that do work in certain newer browsers).
You can't format items in a listbox. You should design your own listbox.
Maybe you can create an HTML table of items. then you can format as you want.
for selection of items you can add a column with radio or checkboxes.
For ASP.NET a custom control this looks good :
JavaScript ListBox Control
You can use CSS Style attributes for the listitems.
But it looks like it is only possible in Firefox.
Edit: Tested it with IE 6 and it worked.