{"id":221,"date":"2007-12-13T03:17:23","date_gmt":"2007-12-13T01:17:23","guid":{"rendered":"http:\/\/www.css3.info\/styling-forms-with-css3\/"},"modified":"2007-12-13T03:17:23","modified_gmt":"2007-12-13T01:17:23","slug":"styling-forms-with-css3","status":"publish","type":"post","link":"https:\/\/www.css3.info\/styling-forms-with-css3\/","title":{"rendered":"Styling Forms with CSS3"},"content":{"rendered":"<div style=\"float: right; margin-left: 32px; margin-top: 14px; margin-bottom: 10px;\"><a href=\"https:\/\/twitter.com\/share\" class=\"twitter-share-button\" data-via=\"css3\" data-count=\"vertical\" data-url=\"https:\/\/www.css3.info\/styling-forms-with-css3\/\">Tweet<\/a><\/div>\n<p>For those of you that haven&#8217;t seen, Dev Opera has just published a two part article series on styling form controls, by <a href=\"http:\/\/christopherschmitt.com\/\">Christopher Schmitt<\/a>.  The <a href=\"http:\/\/dev.opera.com\/articles\/view\/styling-forms-with-attribute-selectors\/\">first part<\/a> covers using attribute selectors (which work in IE7, Opera, Safari and Firefox) to slim down your markup by providing a way to identify certain form controls without the addition of a class value.  An example of this is using <code>input[type=\"text\"]<\/code> in the CSS, rather than adding <code>class=\"text\"<\/code> to the HTML file.  The <a href=\"http:\/\/dev.opera.com\/articles\/view\/styling-forms-with-attribute-selectors-1\/\">second part<\/a> takes this further, by taking advantage of the <code>:enabled<\/code>, <code>:disabled<\/code> and <code>:checked<\/code> pseudo-classes, and a dash of <code>opacity<\/code>.  The browser support for these pseudo-classes are not as strong however.  According to Christopher, Opera is the only browser that supports all three correctly.<\/p>\n<p>If you are not aware of <a href=\"http:\/\/dev.opera.com\/\">Dev Opera<\/a> (known lovingly as <a href=\"http:\/\/en.wikipedia.org\/wiki\/Devo\">Devo<\/a> internally at Opera), it is Opera&#8217;s new developer site.  Look out for a fantastic article on CSS3 from CSS3.info&#8217;s very own Peter Gasston in the near future.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tweet For those of you that haven&#8217;t seen, Dev Opera has just published a two part article series on styling form controls, by Christopher Schmitt. The first part covers using attribute selectors (which work in IE7, Opera, Safari and Firefox) to slim down your markup by providing a way to identify certain form controls without [&hellip;]<\/p>\n","protected":false},"author":25,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[23,22,21,118],"class_list":["post-221","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-css3info","tag-disabled","tag-enabled","tag-selectors"],"_links":{"self":[{"href":"https:\/\/www.css3.info\/wp-json\/wp\/v2\/posts\/221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.css3.info\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.css3.info\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.css3.info\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.css3.info\/wp-json\/wp\/v2\/comments?post=221"}],"version-history":[{"count":0,"href":"https:\/\/www.css3.info\/wp-json\/wp\/v2\/posts\/221\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.css3.info\/wp-json\/wp\/v2\/media?parent=221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.css3.info\/wp-json\/wp\/v2\/categories?post=221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.css3.info\/wp-json\/wp\/v2\/tags?post=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}