CSS Box-Shadow not working with Textarea in Webkit

Question

CSS Box-Shadow not working with Textarea in Webkit

This simple code does not work in Chrome or Safari ...

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> </head> <style> :required {box-shadow:0 0 5px red;} </style> <body> <form> <textarea required></textarea> </form> </body> </html>

It works great in Firefox and Opera. In addition, border:1px solid red works fine in webkit browsers. What a deal? I even tried textarea {display:block;} to think that this might be a built-in problem.

+6

css webkit textarea

doubleJ Jul 25 '12 at 21:22

source share

4 answers

If you give textarea a background declaration of none (or a declaration of the background color for any reason other than white), the shadow will work.

 <style> :required { background: none; box-shadow:0 0 5px red; } </style>

+2

Digthedoug Jul 25 '12 at 21:39

source share

try it

 textarea:required { box-shadow: 0 0 5px red; -webkit-box-shadow: 0 0 5px red; -moz-box-shadow: 0 0 5px red; border: solid 0px transparent; // or border: none; }