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?

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

回答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.

回答2:

If you want to remove EVERYTHING :

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

回答3:

try this:

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

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

回答4:

if no luck with above try to it a class or even id something like textarea.foo and then your style. or try to !important

来源：https://stackoverflow.com/questions/17109702/remove-all-stylings-border-glow-from-textarea