How to remove text area border when focused on?

Question

I have managed to remove the text area border but I want it so the user cant see a border even when they click on it. This is my css as of yet.

.comments{
    border: 0 none #FFF;
    overflow: hidden;
}

I tried making the border transparent, I tried this also but it doesn't work either, also tried it with other attributes active etc.

.comments:focus{
    border: 0 none #FFF;
    overflow: hidden;
}

Is it possible to remove the border when focused on?

The border isn't visible until the textarea is clicked on btw. So border none does work

Answer 1

You need to set outline:none for the textarea.

.comments:focus{
    border: 0 none #FFF;
    overflow: hidden;
    outline:none;
}

Js Fiddle Demo

Answer 2

textarea, input { outline: none; }