{"id":762,"date":"2010-10-05T10:06:27","date_gmt":"2010-10-05T18:06:27","guid":{"rendered":"http:\/\/yvod.com\/ulan\/styling-your-search-form-with-css"},"modified":"2010-10-05T10:06:27","modified_gmt":"2010-10-05T18:06:27","slug":"styling-your-search-form-with-css","status":"publish","type":"post","link":"http:\/\/yvod.com\/ulan\/styling-your-search-form-with-css\/","title":{"rendered":"Styling Your Search Form with CSS"},"content":{"rendered":"<p>I love finding cool tutorials on the web. <a href=\"http:\/\/www.sohtanaka.com\/web-design\/styling-input-search-form-css\/\" target=\"_blank\">Here is one<\/a> on how to style web forms using CSS. I have recently become a big fan of using a single image within CSS to show rollovers and focus. The gist is that you take a big image and then only show the portion of it that you need at the time.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/yvod.com\/ulan\/wp-content\/uploads\/2010\/10\/search_bg1.gif\" alt=\"Search Background\" \/><\/p>\n<p>When the form loads and has no focus, you show the top third. When you click on the form you show the middle third. If you are using IE you show the bottom third.<\/p>\n<p>Very nice. Thank you Soh for the code. I am using it on our the <a href=\"http:\/\/ojasyogacenter.com\" target=\"_blank\">Ojas Yoga Center<\/a> website. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>I love finding cool tutorials on the web. Here is one on how to style web forms using CSS. I have recently become a big fan of using a single image within CSS to show rollovers and focus. The gist is that you take a big image and then only show the portion of it &#8230; <a title=\"Styling Your Search Form with CSS\" class=\"read-more\" href=\"http:\/\/yvod.com\/ulan\/styling-your-search-form-with-css\/\" aria-label=\"Read more about Styling Your Search Form with CSS\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,11],"tags":[],"class_list":["post-762","post","type-post","status-publish","format-standard","hentry","category-code-computers","category-websites"],"_links":{"self":[{"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/posts\/762","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/comments?post=762"}],"version-history":[{"count":0,"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/posts\/762\/revisions"}],"wp:attachment":[{"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/media?parent=762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/categories?post=762"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/tags?post=762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}