Making part of an <option> bold

HTML & CSS
1

I have the following code on my site:


<form action="script.php" method="post">
<p><select name="folderid">
<option value="">- select a folder -</option>
<option value="1">Public: folder 1</option>
<option value="2">Public: folder 2</option>
<option value="3">Private: folder 3</option>
</select>
<p><input type="submit" value=" Next " />
</form>

Is it possible to use CSS and make the “Public:” bold but not the rest? I need it to be something like this:

Public: folder 1
Public: folder 2
Private: folder 3

2

<option value=“1”><strong>Public:</strong>folder 1</option> …

Edit: Hehe check out the smiley!
That’s

<option value="1"><strong>Public:</strong>folder 1</option> ...
3

Nope. According to the DTD,

<!ELEMENT OPTION - O (#PCDATA)>

You can’t have any markup whatsoever inside an OPTION element. Only text, which may have entity references inside it.

4

Who wants a valid page anyways… :wink:

You can do this sort of thing… http://www.sitepoint.com/contact
Check out the Reason for Contact drop down - it’s not exactly what you asked for though.

5

It doesn’t primarily have to do with validity. :slight_smile:
Markup inside an OPTION element should be rendered literally. In your example, the displayed text should be ‘<strong>Public:</strong>folder 1’.

6

The only way to do this is to use

<optgroup label="Public">
7

If you want to use the standard form elements, I think so.(but its likely im wrong, Tommy ?)
You could always do what Google does and recreate the form elements using your own customized elements, but thats not very semantic now is it?