Menu
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.
895
If you want to support very very old versions of Google Chrome, you should use -webkit ; as well as prefixless styling so that it supports new browsers as well. So for the sake of ease, just use normal box-shadow as all browsers support it nowadays.
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.
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
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
