CSS Select Form Border Elimination in IE [Archive]

Fighterfox

12-04-2010, 04:06 PM

I am trying to style a drop-down select box so that no border appears in all major browsers. By using the
style="border:none;" I managed to remove the border in every major browser (Firefox, Chrome, Opera, and Safari), except IE, which, in my case, really makes it look lousy. Is there anyway to fix this? Thanks. Here's my code:

<html>
<head>

<style type="text/css">

div {
background:#402020;
width:150px;
margin:0px;
padding:5px;
border:#202020;
text-align:center;
}

select {
background:#402020;
border:none;
margin:0px;
padding:0px;
font-family:comic sans ms;
color:#e9e9e9;
font-size:14px;
width:60%;
}

</style>
</head>

<body>
<div>
<form>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</form>
</div>
</body>
</html>

jscheuer1

12-04-2010, 05:11 PM

I believe you are stuck with that in IE 7 and less. However, if your document invokes standards compliance, IE 8 and presumably 9, etc. will respect it:

<!DOCTYPE html>
<html>
<head>

<style type="text/css">

div {
background:#402020;
width:150px;
margin:0px;
padding:5px;
border:#202020;
text-align:center;
}

select {
background:#402020;
border:none;
margin:0px;
padding:0px;
font-fami . . .

The only alternative for those older IE browsers I can think of would be a custom select:

http://www.google.com/search?hl=en&client=opera&hs=9fb&rls=en&q=custom+select+element&btnG=Search&aq=f&aqi=g1g-m1g-v1&aql=&oq=&gs_rfai=

But I wouldn't recommend any of that just to satisfy older IE. If you feel you must though (IE 7 may be around a bit yet in significant numbers) make the custom select code IE 7 and less only.