{"id":171,"date":"2011-04-07T20:52:36","date_gmt":"2011-04-07T20:52:36","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=171"},"modified":"2011-04-07T20:52:36","modified_gmt":"2011-04-07T20:52:36","slug":"clever-way-to-style-radio-input-labels","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/clever-way-to-style-radio-input-labels\/","title":{"rendered":"Clever way to style radio input labels?"},"content":{"rendered":"<p>I&#39;ve you haven&#39;t guessed by reading my other posts, I&#39;m a huge fan of extremely minimal markup. It&#39;s just plain easier to update. I have no statistics on this, but I&#39;d have to imagine that for most sites, content is updated far more than style.<\/p>\n<p>But, I&#39;m finally stumped. I know there has to be a clever way to make this look good with CSS alone:<\/p>\n<p><code>&lt;label for=&quot;check1&quot;&gt;Check 1&lt;\/label&gt;<br \/>\n\t&lt;input type=&quot;radio&quot; id=&quot;check1&quot; \/&gt;<br \/>\n\t&lt;label for=&quot;check2&quot;&gt;Check 2&lt;\/label&gt;<br \/>\n\t&lt;input type=&quot;radio&quot; id=&quot;check2&quot; \/&gt;<br \/>\n\t&lt;label for=&quot;check3&quot;&gt;Check 3&lt;\/label&gt;<br \/>\n\t&lt;input type=&quot;radio&quot; id=&quot;check3&quot; \/&gt;<br \/>\n\t<\/code><\/p>\n<p>Below is the best I&#39;ve been able to achieve. It looks decent in all browsers, except pre-IE 8.<\/p>\n<p><code>label + input[type=&quot;radio&quot;] { float: left; clear: right; margin-right: 8px; }<br \/>\n\tlabel + input[type=&quot;radio&quot;] + label { display: block; margin-top: 1em; padding-left: 26px; }<br \/>\n\tlabel + input[type=&quot;radio&quot;] + label + input[type=&quot;radio&quot;] { margin-top: -1em; }<br \/>\n\t<\/code><\/p>\n<p>If any of our readers know of a better solution, please drop a comment. I&#39;d be interested to get a thread going on this.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#39;ve you haven&#39;t guessed by reading my other posts, I&#39;m a huge fan of extremely minimal markup. It&#39;s just plain easier to update. I have&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[12,14],"tags":[],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/171"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=171"}],"version-history":[{"count":2,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/171\/revisions"}],"predecessor-version":[{"id":173,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/171\/revisions\/173"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}