I'm using YUI's css package. Here are the css I'm grabbing from them:

    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css&2.8.0r4/build/base/base-min.css">

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/button/assets/skins/sam/button.css"> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/menu/assets/skins/sam/menu.css">

I want to edit a select element's style. I can change the style for the entire select element, but not per individual style. Here's my markup:

            <select id="menuUserDropselect" name="menuUserDropselect">
                <option value="Profile.php">Profile</option>
                <option value="Login.php?logout" style="font-weight:bold;">Logout</option>
            </select>

The thing that has been the most effective is going into a css file, overriding it but even if I put an id in the Logout option, things aren't changing. Is this something possible? I would think so...

2 answers

danwellman 5600
1
point

Do you use Firefox + Firebug to develop in? If so, select the select box/option element in the firebug DOM explorer and it will list all of the styles applied to the element as well as showing you the selectors used to apply the styles. To override a YUI style just make sure your selector has more weight than theirs, e.g. if their selector is:

select.special { width: etc... }

You can use:

body select.special { width: etc... }

As your selector has an additional element selector in the chain it will have more weight and will override the YUI one. See this Smashing Magazine article for details of selector weight/specificity

Also, if this doesn't work (although it should do as this is the method I use and it has always worked), and all you want to do is make some options bold, you could try using a <strong> tag inside the option:

<option><strong>A Bold Option</strong></option>

That could work :)

Answered almost 7 years ago by danwellman
  • Oh yea, I am so used to CSS, I totally forgotten about the good old `<strong>`, `<em>` etc etc!!! o.k.w almost 7 years ago
o.k.w 2355
0
points

Unfortunately most browsers do not support styling of individual <option> element (Firefox do). Generally, styling is done homogeneously across all the <option> text via the style of the <select> element.

The only trick that is closest to what you want is using <optgroup> to style the child options but this is semantically speaking an INCORRECT usage.

You can give it a try though, like this:

CSS:

 select {
    color: red;
 }
 #opt_bold {
    font-weight: bold;
 }
 #opt_bgcolor {
    background-color: #999999;
 }
 #opt_deco {
    text-decoration: line-through;
 }
 #green {
    color: green;
 }

HTML:

<select>
  <optgroup id="green" label="groupname">
    <option>normal</option>
    <option id="opt_bold">bold</option>
  </optgroup>
  <option id="opt_bgcolor">bg-color</option>
  <option id="opt_deco">text-deco</option>
</select>

PS: The YUI CSS has minimal impact on the above example.

Answered almost 7 years ago by o.k.w