Background colour for form label and radio button
<p>I have set up a form that allows users to sort by date, Asc or Desc.</p>

<p>So far, I have figured out how to let a user:</p>

<p>1) Select a radio button. </p>

<p>2) Keep the radio button selected after submit. </p>

<p>3) Display a written message to the user of their choice.</p>

<p><strong>The HTML / PHP Code:</strong></p>

<pre><code>&lt;p&gt;Sort by Date:&lt;/p&gt;
    &lt;form action="" method="post" class="date"&gt;
        &lt;input type="radio" name="dateorder" onclick="javascript:submit()" value="ascending" &lt;?php if (isset($_POST['dateorder']) &amp;&amp; $_POST['dateorder'] == 'ascending') echo ' checked="checked"';?&gt; /&gt; &lt;label for="ascending"&gt;Newset &amp;rsaquo; Oldest&lt;/label&gt;&lt;br&gt;&lt;br&gt;
        &lt;input type="radio" name="dateorder" onclick="javascript:submit()" value="descending" &lt;?php if (isset($_POST['dateorder']) &amp;&amp; $_POST['dateorder'] == 'descending') echo ' checked="checked"';?&gt; /&gt; &lt;label for="descending"&gt;Oldest &amp;rsaquo; Newset&lt;/label&gt;
    &lt;/form&gt;
    &lt;?php
        if (isset($_POST['dateorder'])){
            echo "Date Order: " . $_POST['dateorder'];
        }
    ?&gt;
</code></pre>

<p>I would like to visually show the users selection by adding a colour background when selected. The background colour should span both the radio button and label. Is this possible with CSS?  So far this is what I have, only the label gets colour/style applied:</p>

<pre><code>&lt;head&gt;
    &lt;title&gt;Practice Radio Buttons&lt;/title&gt;
    &lt;style type="text/css"&gt;
    p{font-weight: bold;}
    form input[type="radio"]:checked + label{
        background-color: yellow;
        padding: 10px;
        border-radius: 5px;}
    &lt;/style&gt;
&lt;/head&gt;
</code></pre>