Bitesize Bugs

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

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.

Filed under: IE6, IE7

10 Responses

  1. […] Using the border: none property will remove the input’s border from most browsers but not for Internet Explorer. In order to fix IE’s input border you need to also add border-color: transparent. More about this issue on IE’s buggy border property in this article. […]

  2. […] Border: none not working on text input in Internet Explorer […]

  3. ata says:

    thank you so much man

  4. allex says:

    just need set border:0;

  5. borriej says:

    it works great!

    In my css i had a send button (div:hover with changing background)
    that also didnt work, but now with this input:0 the default IE button is replaced for my nice css button!

  6. Pseudo says:

    Merci ! ;)

  7. jana says:

    thanks a lot :-)

  8. Artie says:

    THANK YOU!!!!!

  9. mister.ac says:

    Perfect! Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: