{"id":90,"date":"2005-05-04T00:04:53","date_gmt":"2005-05-03T22:04:53","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2005\/05\/04\/input-field-drop-shadow\/"},"modified":"2010-04-16T21:11:10","modified_gmt":"2010-04-16T20:11:10","slug":"input-field-drop-shadow","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2005\/05\/04\/input-field-drop-shadow\/","title":{"rendered":"Input Field Drop Shadow"},"content":{"rendered":"<p>Amazing how I still receive many e-mails regarding those drop shadows in the <code>input<\/code> and <code>textarea<\/code> elements in web forms. This is very simple, so let\u2019s explain it. All you need is background image of the drop shadow and a few CSS lines. <!--more-->Let\u2019s begin with:<\/p>\n<pre>input, textarea {\r\n    background: url(drop_shadow_image.gif) no-repeat 0 0;\r\n}<\/pre>\n<p>You might want to add class name for <code>type=\"text\"<\/code> fields, so they are differentiated from checkboxes, radios or submit buttons (they are all <code>input<\/code> elements):<\/p>\n<pre>&#60;input type=\"text\" class=\"input_text\" id=\"...\" name=\"...\" \/><\/pre>\n<p>and change CSS:<\/p>\n<pre>.input_text, textarea {\r\n    background: url(drop_shadow_image.gif) no-repeat 0 0;\r\n}<\/pre>\n<p>IE\/Win has a problem with proper positioning of a background image in <code>textarea<\/code> element when you scroll inside it or maybe all others miss-behave. Anyway, we add:<\/p>\n<pre>.input_text, textarea {\r\n    background: url(drop_shadow_image.gif) no-repeat 0 0;\r\n}\r\n\/* not for IE\/Mac &#92;*\/\r\n* html textarea {\r\n    background-attachment: fixed;\r\n}\r\n\/**\/<\/pre>\n<p>Wanted more? Nope, that\u2019s all&#8230; : )<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Amazing how I still receive many e-mails regarding those drop shadows in the input and textarea elements in web forms. This is very simple, so let\u2019s explain it. All you need is background image of the drop shadow and a few CSS lines.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[52,53],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/90"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/90\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}