Removing beveled border from drop down list

[bathurst_guy]

I wish to remove the beveled border from a single line drop down list.
I've tried border: 0px and outline: 0px. Border works on other form elements but not for drop down lists?
No biggy, if you know how that'll be great.

[Jona]

You mean that little button with the arrow to the right of the dropdown box itself?

[bathurst_guy]

No i dont mean the arrow, actually can the style of that be changed as well?
I mean the "border" around the drop down.
Just inside the red outline on the image attached.

[Jona]

I don’t know that the arrow button can be styled, but I think you’re looking for something along these lines:

<select size="1" name="selObj" style="border: solid 1px #000">
<option value="-1">—- Pick one —-</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>

[grailquester5]

I've found that some browsers will let you alter form elements with CSS pretty much however you'd like (never tried to alter the arrow on a dropdown menu tho - don't know about that but I'd doubt it). Netscape and Safari are pretty open - IE doesn't render a lot of form CSS - it keeps its design pretty standard (proprietary - imagine that from MS).

One thing: when setting border elements, margins, etc. in CSS you typically shouldn't add units to 0 values. Hence:

"border: 0px;" should read "border: 0;"

Although technically both are acceptable according to CSS standardiztion, I have found that adding units can cause render issues in some browsers.

[Jona]

If you don’t want a border, sometimes it works better if you tell it not to make one at all (and not just set its width to “0” ).


border: none;

[bathurst_guy]

Hmm, none of these do what I want but it doesn't matter. Just wanted to see if it was possible, maybe in the next CSS. Thanks for all feedback.