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="spBorder" class="clsBorder">
         <select id="lstTest" name="lstTest">
             <option value="1">A value</option>
             <option value="2">Another value</option>
             <option value="3">3</option>
             <option value="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