Interesting solution!
Although I still wish there could some more serious formatting on the
select elments...

BTW, the class in your example could be written in an easier way:

.clsBorder {
	border:1px solid black;
	padding:1px;
}



Interestingly enough, you can specify a border color and it works in
Netscape 6.2 and up, and Opera 6:

.clsBorder {
	border:1px solid red;
}

<select id=3D"lstTest" name=3D"lstTest" class=3D"clsBorder">
	<option value=3D"1">A value</option>
	<option value=3D"2">Another value</option>
	<option value=3D"3">3</option>
	<option value=3D"4">4</option>
</select>


But still not enough...   :-(


/Robert



-----Ursprungligt meddelande-----
Fr=E5n: Imar Spaanjaars [mailto:Imar@S...]
Skickat: den 26 september 2002 09:04
Till: JavaScript HowTo
=C4mne: [javascript_howto] Re: Controlling Select Boxes


Hi Chip,

Familiar problem, I guess. The select input control definitely has its
quirks. You can't get it flat, and you can't get it to listen to the CSS

border property. I guess the guys at Microsoft want you to upgrade to
Windows XP to get that user experience. ;-)

Anyway, there is a work around (no pun intended) by creating a box
around
the select control through a span:

First the HTML:

     <span id=3D"spBorder" class=3D"clsBorder">
         <select id=3D"lstTest" name=3D"lstTest">
             <option value=3D"1">A value</option>
             <option value=3D"2">Another value</option>
             <option value=3D"3">3</option>
             <option value=3D"4">4</option>
         </select></span>

Make sure the </span> comes right after the </select> or otherwise
you'll
get some weird white space inside the box.

The span tag has a class called clsBorder which is defined like this:

.clsBorder {
     BORDER-RIGHT: #000000 1 solid;
     BORDER-TOP: #000000 1 solid;
     BORDER-LEFT: #000000 1 solid;
     BORDER-BOTTOM: #000000 1 solid;
     padding: 1px;
}

I changed the color and the border width so it works on a white
background,
but other than that, it's about the same definition as you had. I added
a
"padding : 1 px;" to create some distance between the border and the
select
list. You may need to fiddle a bit with that to get the desired result.

Volia: a select list with a border. Unfortunately, you need those
surrounding <span> tags wherever you need a select list, but hey, you
can't
have it all...... ;-)


HtH

Imar







At 12:35 PM 9/25/2002 -0400, you wrote:
>Since the CSS pros seem to be Javascript pros as well - I'll ask this
>question here ... (the CSS list hasn't been able to answer this one
>after quite a bit of discussion - if anyone knows the answer I'll post
>it on the CSS list) ...
>
>Is there a way to control the formatting of the box that surrounds a
>SELECT just as there is a way to control INPUT ... example below ...
>
>
>The following works for INPUT (and provides for significant
>possibilities for improvement of basic user interface in forms)
>
>INPUT {
>BORDER-RIGHT: #FFFFFF 1 solid;
>BORDER-TOP: #FFFFFF 5 solid;
>FONT-SIZE: 10px;
>BORDER-LEFT: #FFFFFF 1 solid;
>BORDER-BOTTOM: #CCCCCC 1 solid;
>FONT-FAMILY: verdana, helvetica, sans-serif
>}
>
>BUT ... the following will NOT work (at least in IE) and prevents
>similar improvements as with INPUT above. Worse yet, when INPUT
>formatting is improvable but SELECT format is not ... the result of
>fixing one but not the other is worse than no improvement at all.
>
>SELECT {
>color: #000000;
>BORDER-RIGHT: #FFFFFF 1 solid;
>BORDER-TOP: #FFFFFF 5 solid;
>FONT-SIZE: 10px;
>BORDER-LEFT: #FFFFFF 1 solid;
>BORDER-BOTTOM: #CCCCCC 1 solid;
>FONT-FAMILY: verdana, helvetica, sans-serif
>}
>
>
>Comments? Answers? Work-arounds?
>
>Chip Dukes




---

Improve your web design skills with these new books from Glasshaus.

Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=3Dnosim/theprogramm
e
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=3Dnosim/theprogramm
e
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=3Dnosim/theprogramm
e
r-20