Remove all stylings (border, glow) from textarea

Question

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?

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;
}

Cynara

Have you tried a CSS reset? – Emcee

Answer 1

The glow effect is most-likely controlled by box-shadow. In addition to adding what Pavel said, you can add the box-shadow property for the different browser engines.

textarea {
    border: none;
    overflow: auto;
    outline: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    resize: none; /*remove the resize handle on the bottom right*/
}

You may also try adding !important to prioritize this CSS.

Copro

You can also remove the resize handle on the bottom right with resize: none; – Mcauley

The answer is good, but not complete, this will not work properly if you will not add the focus modifier, such as textarea:focus { border: none; overflow: auto; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; resize: none; } Then it will work – Boothman

Answer 2

If you want to remove EVERYTHING :

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

Shilohshim

Nice. Add a "border-radius: 0;" if you are adding borders back in to git rid of the curves from the text form. – Abe

This answer is superior to the accepted answer because it included "resize: none" which the accepted answer is missing. – Mariannamarianne

Answer 3

try this:

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

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

Eurhythmics

Tried it but nothing happens :/ – Cynara

hm, i have no styling at all... did u try jsbin link? – Eurhythmics

Tried your jsbin and that works, but not for me in my code. I wonder if it has something to do with Twitter Bootstrap maybe? When I put "!important" after every line a lot of styling was removed but there is still a small, light border in the top, on the left and on the right (the bottom is white). Strange... – Cynara

@Cynara have you tried applying the style above to the :focus selector? – Efta

resize: none; helps as well. +1 for jsbin link – Pasteboard

Answer 4

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)

 

Magnesite