Remove Scrollbar from Textarea in IE

By default all versions of IE have a scrollbar on textareas, even when they are empty.

No other browsers do this, so if you want to remove it so IE can visually match other browsers, just:

textarea { overflow: auto; }

The scrollbar will return (rightfully) when the text in the textarea expands beyond it's bounds.

Comments

  1. User Avatar
    CJBNZ
    Permalink to comment#

    Thanks! Always wondered how you could do that!

  2. User Avatar
    pampalini
    Permalink to comment#

    thanks, it’s fine but the Opera?

  3. User Avatar
    Gurvinder
    Permalink to comment#

    Thank you for this cool tip. can use it at many places.

  4. User Avatar
    Boe Jill
    Permalink to comment#

    Excellent tip, but as Mr Pampalini asked, how can we make this work in Opera?

  5. User Avatar
    sajan kota
    Permalink to comment#

    Very useful tip. many webmaster would be wait to know how to remove the scroll bar from textarea.
    Thanks once again.

  6. User Avatar
    Cubism Designs
    Permalink to comment#

    I am in need of this hack (for me it’s hack) as i found lot for removing scrollbar from textarea in IE7. Thanks for this post.

  7. User Avatar
    pampalini
    Permalink to comment#

    sorry, it works on Opera too, but only from version 10.51! ;)

  8. User Avatar
    kiko

    The same problem with older versions of Opera, any way to fix?

  9. User Avatar
    Panos I. Papadopoulos
    Permalink to comment#

    Thanks for the simple and right answer! It’s just what I looked for!

  10. User Avatar
    AFI
    Permalink to comment#

    Thanks. Solved my issue in 1 minute :)

  11. User Avatar
    saravanan
    Permalink to comment#

    useful tip

  12. User Avatar
    Noel
    Permalink to comment#

    Thanks for that – have checked this in IE 5.5, 6, 7 and 8 and works exactly as described (I’ve seen a few forum posts suggesting that overflow: hidden could be used but that didn’t seem like the right way to approach the problem). This also works correctly if you’re using a dynamic-width textarea (columns value set inline in the tag itself and width value in stylesheet overriding it).

  13. User Avatar
    Uma
    Permalink to comment#

    Thank you very much. Really it is very helpful to me.

  14. User Avatar
    Ricky
    Permalink to comment#

    Nice tip. This is exactly what I’m looking for. Thank you for sharing.

  15. User Avatar
    Keiron Lowe
    Permalink to comment#

    Hi Chris,

    Hope you could help, I’m using this on a site I am developing but I have found that in IE7 and IE6 it removes the scrollbar, but keeps the space where the scrollbar used to be. Resulting in them two browsers having a wider textarea.

    It’s driving me nuts!

  16. User Avatar
    Andrey
    Permalink to comment#

    Cool! Thanks a lot!

  17. User Avatar
    asaf

    short and simple, 10x

  18. User Avatar
    Hamlet
    Permalink to comment#

    Thankx!

  19. User Avatar
    ric
    Permalink to comment#

    if seems like the space of the scroller remains as the scroller disappears. this is not a good solution. this happens in ie7 btw.regards

  20. User Avatar
    AT
    Permalink to comment#

    thanx! this thing was very useful for me

  21. User Avatar
    copycut
    Permalink to comment#

    Thanks Chris, IE is soooooo evil

  22. User Avatar
    epiziv
    Permalink to comment#

    thanks A lot…….!!!!!!!!!!!

  23. User Avatar
    Rohit Rox
    Permalink to comment#

    small but so useful snippet !! Thanks !! saved a day !!

  24. User Avatar
    Manish
    Permalink to comment#

    textarea {
    resize: none;
    }

    enjoy!

    :-)

  25. User Avatar
    saif
    Permalink to comment#

    awesm trick… i was stuck
    thanks…. :)

  26. User Avatar
    Gouthami
    Permalink to comment#

    Very nice tip thank you

  27. User Avatar
    Ahmet KAYAR
    Permalink to comment#

    Thanks :)

  28. User Avatar
    Ahmed
    Permalink to comment#

    This site is the best site that teach CSS thank you!!

  29. User Avatar
    alin
    Permalink to comment#

    It’s really works! Thanks

  30. User Avatar
    shruti
    Permalink to comment#

    hi,
    if we can give property only

    textarea {
    overflow: auto;
    }
    its not working always, we have to give value like this
    textarea {
    overflow: auto;
    resize:none;
    }

    thanks.

  31. User Avatar
    sakthi
    Permalink to comment#

    This code is working but if i use jquery for design purpose its not working. can you give suggetion for that?

  32. User Avatar
    gopinath
    Permalink to comment#

    overflow:auto

  33. User Avatar
    sam
    Permalink to comment#

    if i want the output as given in IE in another browser then what should i do

  34. User Avatar
    crybka
    Permalink to comment#

    -ms-overflow-style: none;

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag