Best IT Recipes

Remove all styles (borders, glow) from textarea

I want to remove styles from the text box and leave all white without any border or glow, if possible. I tried with various materials 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 have tried so far:

textarea#story { // other stuff -moz-appearance:none; outline:0px none transparent; } textarea:focus, input:focus{ outline: 0; } *:focus { outline: 0; }
+48
css forms border textarea
Jun 14 '13 at 13:31 on
source share
5 answers

The glow effect is most likely controlled by a shadow box. In addition to what Paul said, you can add a box-shadow property for 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 can also try adding! Important to prioritize this CSS.

+87
Jun 14 '13 at 13:47 on
source share

If you want to delete ALL:

 textarea { border: none; background-color: transparent; resize: none; outline: none; }
+20
Jun 17 '15 at 18:29
source share

try the following:

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

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

0
Jun 14 '13 at 13:37
source share

If you're out of luck with this, try a class or even id something like textarea.foo, and then your style. or try it! important

0
Jun 14 '13 at 14:55
source share

also add {-webkit-appearance:none;} to support safari

0
Dec 20 '18 at 15:23
source share


More articles:


All Articles