PDA

View Full Version : Select boxes and CSS

Tanker
07-23-2002, 06:45 PM
I have a select box that does a onClick="form.submit()", What I was wondering if it was possible to make the options highlight when the user mouses over them? Something like the following.

Unfortunately onMouseOver and onMouseOut don't seem to work on the individual options, and if I put it in the Select tag it highlight all the options.


<html>
<head>
<title>Untitled</title>
<style>
.selected { color: Yellow; background: Teal; }
.unselected { }
</style>
</head>

<body>
<select name="test" size="5">
<option value="1" onMouseOver="this.className='selected'; return true" onMouseOut="this.className='unselected'; return true">This is option 1</option>
<option value="2" onMouseOver="this.className='selected'; return true" onMouseOut="this.className='unselected'; return true">This is option 2</option>
<option value="3" onMouseOver="this.className='selected'; return true" onMouseOut="this.className='unselected'; return true">This is option 3</option>
<option value="4" onMouseOver="this.className='selected'; return true" onMouseOut="this.className='unselected'; return true">This is option 4</option>
<option value="5" onMouseOver="this.className='selected'; return true" onMouseOut="this.className='unselected'; return true">This is option 5</option>
</select>
</div>
</body>

</html>


Thanks in advance.
jkd
07-23-2002, 07:16 PM
You will be able to do this in Mozilla when the XBL-based form controls are complete through:

option:hover {
background: green;
color: white;
}

For example. Until then, no browser can do that. And because IE is so tightly integrated with Windows, I'll doubt that you'll *ever* be able to do it in IE.

Currently, you can enable the incomplete XBL form bindings in Mozilla and experiment, but you'll get a lot of misrendered form element.
Squintz
07-23-2002, 07:52 PM
Of topic but related What is Mozilla? <----Newb
Tanker
07-23-2002, 08:38 PM
Mozilla is the netscape browser (the short answer from the person that doesn't have to code for it)

Thanks for the reply, not what I was hoping for, but at least it means it wasn't something I was doing wrong. I ended up rewriting the select box as a table then just controlled the colors/text of the cells. Same functionailty just a different container. :)
jkd
07-23-2002, 09:12 PM
Originally posted by Tanker
Mozilla is the netscape browser (the short answer from the person that doesn't have to code for it)

Not the entirely correct short answer either, but generally suffices.

Mozilla is the open-source project started by Netscape after releasing the source code to Navigator 4.0. The code was scrapped and started anew. All incarnations of the Netscape browser suite after NS4 were based on this project, and the rendering engine codenamed Gecko.

NS6 is based on very old builds of Mozilla. NS7 is based on the Mozilla 1.0 trunk (pretty recent).

Other browsers use the Gecko rendering engine as well, such as Galeon (for GNOME), Beonex, and K-meleon.

The Mozilla suite is in my opinion by far the best browser available, and there are a lot of documented (heh, undocumented too) specs to back it up.

Anyway, if you are further curious to what Mozilla is, visit www.mozilla.org. Let's get this thread back on topic. :)
(If you must inquire further, start a new thread in this forum).