CSS Select Form Border Elimination in IE

**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

HTML Code:

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 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:

Code:

<!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&c...=&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.

Thread: CSS Select Form Border Elimination in IE

Thread Tools

Search Thread

CSS Select Form Border Elimination in IE

Bookmarks

Bookmarks

Posting Permissions