'Remove all stylings (border, glow) from textarea

I want to remove the stylings from a textarea and leave it all white without any border or glow, if possible. I've tried with different stuff found here on SO, but nothing works (tried with FF and Chrome).

So, is it possible and if so how to do it?

enter image description here

What I've tried so far:

textarea#story {
  // other stuff
  -moz-appearance:none;
  outline:0px none transparent;
}

textarea:focus, input:focus{
    outline: 0;
}

*:focus {
    outline: 0;
}
cssformstextareaborder


Solution 1:[1]

If you want to remove EVERYTHING : 

textarea {
    border: none;
    background-color: transparent;
    resize: none;
    outline: none;
}

Solution 2:[2]

try this:

textarea {
        border-style: none;
        border-color: Transparent;
        overflow: auto;
        outline: none;
      }

jsbin: http://jsbin.com/orozon/2/

Solution 3:[3]

You want a minimal textarea with no borders, or resize-drag-icon.

Both when not selected and when focus.

It's easy but you'll need to update rows attribute via JS as newlines are added or removed during text input.

Here is the CSS

textarea, textarea:focus
{
    font-family: "roboto","Helvetica Neue",Helvetica,Arial,sans-serif; /* make your choice */
    font-size: 11px;                                                   /* make your choice */ 
    border: none;
    background: transparent;
    -webkit-appearance: none;
    -moz-apperarance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    outline: none;
    padding: 0px;
    resize: none;
    width: 100%;
    overflow: hidden;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

 

in order to keep things working as expected (looking good) you have to programmatically set/update textarea's attribute rows to the count of \r\n in the the textarea contents plus 1 when the contents is set and when it's updated (user input / other)

 

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lucas B
Solution 2 Pavel
Solution 3

Related Questions