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.
Related
I have this navigation that only appears on smartphones. For testing purpose you can see a desktop version here: http://dknytkom.dk/forside/
I am trying to replace the anchors "menu" and "Søg" with icons using background image. But for some reason the styling rules only affects one of either. If I switch the order of the css command lines, I get to select the other.
I've tried using attributes, like a[href="..."]; I've tried using a:nth-child(...), and finally given them an id each but to no avail.
Anyone got a clue?
first of all we appreciate if you post the css selector code that apply to just one of them.
second as i understand your path to the picture has problem, correct it and then tell us what was the result.
if you have problem with selector use a very specific one like these two:
for first one use : a#menu-knap.counter
for second you can use a#soege-knap.counter
Sorry for the inconvenience. I remove some css comment around the statements, and yup, it worked.
I have googled, but found no satisfactory answer.
Is there a way to execute a CSS selector live in the browser in the same way you can with JavaScript in the console?
I know I can modify the CSS in the Styles pain, but this doesn't seem to let me add psuedo selectors such as :first-of-type. It also doesn't appear to show all tags affected or the tag set returned by a selector.
Is there a way I can execute section.blah:first-of-type and see the returned or affected elements?
I'm using only Chrome right now but can use FF or whatever if it gives me this feature.
In the Elements tab, you can search with selector syntax.
If you search for
.myclass
you will find elements that have class="myclass"
I think that this is the closest that you can get to what you are asking
Go to the elements tab, and press ctrl+F (for find). in the example below, enter div.answer
to the right of the search string, you see "1 of 3" stating that 3 elements met your criteria. The current one is highlighted. and you can go up & down thru the items with the arrows.
If you use jQuery in your page then you can do:
$("section.blah:first-of-type");
Executing that in the browser console will show you a list of elements that jquery matched.
Better yet you can assign it to a variable and traverse it programatically.
Acctually you can do that just via editing the Styles pane.
You have to select a parent first(html in my case).
The result is:
In this way, chrome will show all affection instantly. Not just highlight the DOM tree.
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.
What is the simplest and most elegant way to simulate the hover pseudo-class for non-Anchor tags in IE6?
I am specifically trying to change the cursor in this instance to that of a pointer.
I think the simplest way is to use the hover.htc approach. You add the hover.htc file to your site, then reference it in your stylesheet:
body { behavior:url("csshover.htc"); }
If you want to keep things as clean as possible, you can use IE conditional comments so that line is only rendered users with IE6.
Regarding your request -- I am specifically trying to change the cursor in this instance to that of a pointer -- the easiest way is to specify cursor:pointer in your css. I think you will find that works in IE 6.
Try this to verify (where div can be any element):
<div style="background:orange; cursor:pointer; height:100px; width:100px;">
Hover
</div>
I would say that the simplest method would be to add onmouseover/out Javascript functions.
Another alternative that will fix many more issues in one go is to use IE7.js.
Another approach, depending on what the item is, is to add a non link anchor and set its display to block. Either put the anchor within or surrounding the item you want the pseudo hover behavior on.
Aside:
I actually already needed to swap the image anyhow
Make sure you take a look at Image Sprites. Sometimes its much nicer to use one image and "shift" the image then to use two separate images and "toggle" or "swap" between them. In my experience its been much nice when as user interacts with it is sometimes an advantage that there is a single request for the 1 image then multiple requests for multiple images.
I liked the mouseover/out best since I actually already needed to swap the image anyhow. I really should have thought of doing this with javascript to begin with.
Thanks for the quick answers.
#Joseph
Thanks for that link. I had never heard of this technique before and really like the idea.
I will definitely try that out and see how I fare with it.
If your willing to use JQuery, I would use Set Hover Class for Anything technique.