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.

About these ads

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: