<p>Given the code bellow, how do I style the radio buttons to be next to the labels and style the label of the selected radio button differently than the other labels?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet"&gt;
&lt;link href="http://yui.yahooapis.com/2.5.2/build/base/base-min.css" rel="stylesheet"&gt;

&lt;div class="input radio"&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;What color is the sky?&lt;/legend&gt;
    &lt;input type="hidden" name="color" value="" id="SubmitQuestion" /&gt;
    &lt;input type="radio" name="color" id="SubmitQuestion1" value="1"  /&gt;
    &lt;label for="SubmitQuestion1"&gt;A strange radient green.&lt;/label&gt;
    &lt;input type="radio" name="color" id="SubmitQuestion2" value="2"  /&gt;
    &lt;label for="SubmitQuestion2"&gt;A dark gloomy orange&lt;/label&gt;
    &lt;input type="radio" name="color" id="SubmitQuestion3" value="3"  /&gt;
    &lt;label for="SubmitQuestion3"&gt;A perfect glittering blue&lt;/label&gt;
  &lt;/fieldset&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Also let me state that I use the yui css styles as base. If you are not familir with them, they can be found here:</p>

<ul>
<li><a href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css" rel="nofollow noreferrer">reset-fonts-grids.css</a></li>
<li><a href="http://yui.yahooapis.com/2.5.2/build/base/base-min.css" rel="nofollow noreferrer">base-min.css</a></li>
</ul>

<p>Documentation for them both here : <a href="http://developer.yahoo.com/yui/reset/" rel="nofollow noreferrer">Yahoo! UI Library</a></p>

<p>@pkaeding: Thanks. I tried some floating both thing that just looked messed up. The styling active radio button seemed to be doable with some input[type=radio]:active nomination on a google search, but I didnt get it to work properly. So the question I guess is more: Is this possible on all of todays modern browsers, and if not, what is the minimal JS needed?</p>

[{'answer_id': 43703, 'author': 'pkaeding', 'author_id': 4257, 'author_profile': 'https://Stackoverflow.com/users/4257', 'pm_score': 3, 'selected': False, 'text': '<p>This will get your buttons and labels next to each other, at least.  I believe the second part can\'t be done in css alone, and will need javascript.  I found a page that might help you with that part as well, but I don\'t have time right now to try it out: <a href="http://www.webmasterworld.com/forum83/6942.htm" rel="nofollow noreferrer">http://www.webmasterworld.com/forum83/6942.htm</a></p>\n\n<pre><code>&lt;style type="text/css"&gt;\n.input input {\n  float: left;\n}\n.input label {\n  margin: 5px;\n}\n&lt;/style&gt;\n&lt;div class="input radio"&gt;\n    &lt;fieldset&gt;\n        &lt;legend&gt;What color is the sky?&lt;/legend&gt;\n        &lt;input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" /&gt;\n\n        &lt;input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1"  /&gt;\n        &lt;label for="SubmitQuestion1"&gt;A strange radient green.&lt;/label&gt;\n\n        &lt;input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2"  /&gt;\n        &lt;label for="SubmitQuestion2"&gt;A dark gloomy orange&lt;/label&gt;\n        &lt;input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3"  /&gt;\n        &lt;label for="SubmitQuestion3"&gt;A perfect glittering blue&lt;/label&gt;\n    &lt;/fieldset&gt;\n&lt;/div&gt;\n</code></pre>\n'}, {'answer_id': 44043, 'author': 'Chris Zwiryk', 'author_id': 734, 'author_profile': 'https://Stackoverflow.com/users/734', 'pm_score': 6, 'selected': True, 'text': '<p>The first part of your question can be solved with just HTML &amp; CSS; you\'ll need to use Javascript for the second part.</p>\n\n<h3>Getting the Label Near the Radio Button</h3>\n\n<p>I\'m not sure what you mean by "next to": on the same line and near, or on separate lines? If you want all of the radio buttons on the same line, just use margins to push them apart. If you want each of them on their own line, you have two options (unless you want to venture into <code>float:</code> territory):</p>\n\n<ul>\n<li>Use <code>&lt;br /&gt;s </code> to split the options apart and some CSS to vertically align them:</li>\n</ul>\n\n\n\n<pre><code>&lt;style type=\'text/css\'&gt;\n    .input input\n    {\n        width: 20px;\n    }\n&lt;/style&gt;\n&lt;div class="input radio"&gt;\n    &lt;fieldset&gt;\n        &lt;legend&gt;What color is the sky?&lt;/legend&gt;\n        &lt;input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" /&gt;\n\n        &lt;input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1"  /&gt;\n        &lt;label for="SubmitQuestion1"&gt;A strange radient green.&lt;/label&gt;\n        &lt;br /&gt;\n        &lt;input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2"  /&gt;\n        &lt;label for="SubmitQuestion2"&gt;A dark gloomy orange&lt;/label&gt;\n        &lt;br /&gt;\n        &lt;input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3"  /&gt;\n        &lt;label for="SubmitQuestion3"&gt;A perfect glittering blue&lt;/label&gt;\n    &lt;/fieldset&gt;\n&lt;/div&gt;\n</code></pre>\n\n<ul>\n<li>Follow <em>A List Apart</em>\'s article: <a href="http://www.alistapart.com/articles/prettyaccessibleforms" rel="noreferrer">Prettier Accessible Forms</a></li>\n</ul>\n\n<h3>Applying a Style to the Currently Selected Label + Radio Button</h3>\n\n<p>Styling the <code>&lt;label&gt;</code> is why you\'ll need to resort to Javascript. A library like <a href="http://jquery.com" rel="noreferrer">jQuery</a>\nis perfect for this:</p>\n\n<pre><code>&lt;style type=\'text/css\'&gt;\n    .input label.focused\n    {\n        background-color: #EEEEEE;\n        font-style: italic;\n    }\n&lt;/style&gt;\n&lt;script type=\'text/javascript\' src=\'jquery.js\'&gt;&lt;/script&gt;\n&lt;script type=\'text/javascript\'&gt;\n    $(document).ready(function() {\n        $(\'.input :radio\').focus(updateSelectedStyle);\n        $(\'.input :radio\').blur(updateSelectedStyle);\n        $(\'.input :radio\').change(updateSelectedStyle);\n    })\n\n    function updateSelectedStyle() {\n        $(\'.input :radio\').removeClass(\'focused\').next().removeClass(\'focused\');\n        $(\'.input :radio:checked\').addClass(\'focused\').next().addClass(\'focused\');\n    }\n&lt;/script&gt;\n</code></pre>\n\n<p>The <code>focus</code> and <code>blur</code> hooks are needed to make this work in IE.</p>\n'}, {'answer_id': 44072, 'author': 'Henrik Gustafsson', 'author_id': 2010, 'author_profile': 'https://Stackoverflow.com/users/2010', 'pm_score': 5, 'selected': False, 'text': '<p>For any CSS3-enabled browser you can use an <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors" rel="nofollow noreferrer">adjacent sibling selector</a> for styling your labels</p>\n\n<pre class="lang-css prettyprint-override"><code>input:checked + label {\n    color: white;\n}  \n</code></pre>\n\n<p>MDN\'s <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors#Browser_compatibility" rel="nofollow noreferrer">browser compatibility table</a> says essentially all of the current, popular browsers (Chrome, IE, Firefox, Safari), on both desktop and mobile, are compatible.</p>\n'}]
['https://Stackoverflow.com/questions/43643', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/4013/']