CSS Box-Shadow Isn't Working With Textarea In Webkit

css, textarea, webkit

Solution

You need to add

-webkit-appearance: none;

to force the awesome webkit render textarea as an ordinary block and apply all the CSS you write.

See jsfiddle

Problem

This simple code is not working 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 just fine in Firefox and Opera. Also, `border:1px solid red` works just fine in webkit browsers. What's the deal? I even tried `textarea {display:block;}` thinking that it could have been an inline issue.

Original source