Border: none not working on text input in Internet Explorer

Internet Explorer will not remove an input’s border when using the border: none CSS property. In order to achieve this effect for other major browsers as well as for IE you need to also add border-color: transparent.

Update April 2010

As noted in allex’s comment below there is a simpler solution:

input{
  border:0
}

I have tested this out and it works fine on all the major browsers (IE 6+, Firefox 3+, Safari 4+, Chrome and Opera).

Example

See a working example on the demo page.

Internet Explorer removes input border when using border: none and border-color: transparent

HTML markup

<input type="text" value="textInput" />

CSS

input{
  border: none;
  border-color: transparent;
}

Side effects

Be careful when using border-color: transparent with border: none because they will impact the input’s box model by removing the border’s dimensions.
This will alter the input’s relationship, like vertical positioning, with surrounding elements.

About these ads

Filed under: IE6, IE7