/    Sign up×
Community /Pin to ProfileBookmark

Removing beveled border from drop down list

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.

to post a comment
CSS

6 Comments(s)

Copy linkTweet thisAlerts:
@JonaApr 24.2005 — [font=Trebuchet MS]You mean that little button with the arrow to the right of the dropdown box itself?[/font]
Copy linkTweet thisAlerts:
@bathurst_guyauthorApr 24.2005 — 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.
Copy linkTweet thisAlerts:
@JonaApr 24.2005 — [font=Trebuchet MS]I don’t know that the arrow button can be styled, but I think you’re looking for something along these lines:[/font]

<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>
Copy linkTweet thisAlerts:
@grailquester5Apr 24.2005 — 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.
Copy linkTweet thisAlerts:
@JonaApr 24.2005 — [font=trebuchet ms]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” ).[/font]

<i>
</i>border: none;
Copy linkTweet thisAlerts:
@bathurst_guyauthorApr 25.2005 — 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.
×

Success!

Help @bathurst_guy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.11,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...