select forms - border?

[Rick]

Hi

Just a simple question thats starting to bug me

I have a search form on a site, and while the style bit works for the text field and submit button it won't work for the select thingy...

Have a look at the screen shot:


I want the select to look the same as the input and submit boxes. Code I am using is below - any suggestions?

Thanks alot Rick

<!-- login form -->

                  &amp;nbsp;Search:&amp;nbsp;
                  <input type="text" size="12" ..." style="font-family: Verdana, Arial; font-size: 11px; border: 1px solid #000000; background-color: #00CCFF" value="for..." onFocus="this.value='';" />
                  &amp;nbsp;
                  <select name="what" onFocus="this.value='';" style="font-family: Verdana, Arial; font-size: 11px; border: 1px solid #000000; background-color: #00CCFF">
			<option value="1">Whole Site</option>
			<option value="2">Articles</option>
			<option value="3">Forums</option>
			<option value="4">the Net</option>
			<option value="5">Everywhere</option>
		  </select>
                  &amp;nbsp;<input type="submit" value="GO" style="font-family: Verdana, Arial; font-size: 9px; border: 1px solid #000000; background-color: #00CCFF" />

[jofa]

"...we currently use the built in Windows drop-down listbox, which is a windowed control (technical Windows
programming term - it means the control is a window in and of itself). ... we need to re-implement SELECT as a windowless control (or some other implementation). We have a first-pass at this - the IE:SELECT element behavior, check the IE 5.5 beta SDK - but we felt it would not be high-quality enough in this release to pass for the <SELECT> element."
Chris Wilson, Internet Explorer Team

He is talking about the z-index problem with <select>s, but I think the answer explains you border problem too - the <select> is still a windowed control

What you can do is
1. use an <object> tag instead of <select>, and use the object ComboBox (classid="clsid:8BD21D30-EC42-11CE-9E0D-00AA006002F3"), and set...
<PARAM NAME="BackColor" VALUE="16763904"> to get bgcolor 00ccff
<PARAM NAME="SpecialEffect" VALUE="0"> to get fmSpecialEffectFlat, not fmSpecialEffectSunken
border=1 (for the object tag)
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="BorderColor" VALUE="2147483654"> to get 1px solid black border
etc etc... have fun! (and it's only working in IE/windows)

or
2. create your own windowless select element
Example: http://www.dansteinman.com/dynduo/en/selectlist.html

[Rick]

Thanks - I'll go and have a look at that site

Rick

[redux]

i would, personally, shy away from both solutions. the first one because it's obviously IE only, and the second one because it relies completely on Javascript being available and enabled, which - of course - is a big accessibility no-no, as it will just not work under text browser or standard browsers which have it turned off (incidentally, i tried the code from the dynamic duo site under IE5.5 with JS on, and it still didn't work for me...)

[jofa]

That's true (the accessibility issues), but if you for some reason (obstinate client) must have a select list with a certain look...
And maybe the IE only limitation isn't a problem always.
I think the Dynamic Duo script hasn't been updated for a while, but you can get some "inspiration" from it

[Rick]

Originally posted by redux
i would, personally, shy away from both solutions...

I pretty much came to this conclusion myself, and for pretty much the reasons you have both mentioned above.

The question was for a site I am developing, and I don't really think it will make a massive difference. I was just looking for a CSS solution that would make it look a little more like the rest of the forms, however its not the end of the world if it doesn't. If I ever need to do this in the future at least I know how now

Thanks etc...
ZOO