Hi all,
I've been reading on this list for a while now, taking my time before
opening my mouth :)
I came across an interesting problem last night, while skinning the front
end of a tool we're going to be using here at work. I created a mock-up
design which you can view here
(http://prezence.servehttp.com/10min/mockup.png) and as you can see what I
want to do is style a multi-select box. I did a bit of reading about select
boxes, and to my shock and horror I discovered that I won't be able to style
the border of the <select>.
That is, of course, unless someone here knows a workaround other than the
"replace it all with images and hide the original element" one (I can't
remember the link or title of this concept, but I think it's fairly well
known).
My second question relates to styling the "selected" items in the list,
using a red background colour (depicted in the mockup) as opposed to the
default blue background+white text that IE+FF defaults to. I don't have the
original code here (writing this mail from the office) but the closest I
came, testing in Firefox, was using something along the lines of the
following: (being CSS2, IE didn't have a clue, but it worked in Gecko).
Assuming the markup of the left multi-select was something like the
following:
<select class="modules">
<option>News</option>
<option selected="selected">Gigs</option>
<option>Galleries</option>
<option>Tours</option>
<option>Biography</option>
<option>Releases</option>
</select>
and the CSS:
select.modules option[selected] {
background-color: #F00;\
color: white;
}
This had the odd effect that elements that were set as selected in the HTML
would be properly styled (as long as they were not "currently" selected). I
also tried
select.modules option:hover {
background-color: pink;
color: white;
}
to see if it would work. All of this is well and fine, but no matter what
else I tried (option:active, element has focus?) I couldn't seem to crack
this one.
Does anyone have any ideas? I'm stumped.
Thanks!
Ian van den Heuvel
PHP Developer, Prezence South Africa
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
