Radio Button Change Css When Clicked

Please take a look at http://jsfiddle.net/JHMqG/ I'm trying to figure out how to change the background of the radio button when clicked. So far, I've been successful with the cat o

Solution 1:

Here you go: http://jsfiddle.net/JHMqG/1/ On the dog, the label element only contained the text. On the cat, the label element contained the text and the radio button. Also, I cleaned up your HTML a bit.

Solution 2:

See this:

DEMO

I changed a bit the HTML:

<div><inputtype="radio"name=1Value=420id="a1"><labelfor="a1"class="radiostyle" >Cat ($420)</label></div><div><inputtype="radio"name=1Value=375id="a2"><labelfor="a2"class="radiostyle">Dog ($375)</label></div>

and added a few bits to the CSS, so it now looks like this:

div { margin: .5em; }
input, label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
input[type=radio] { margin-right: -1.65em; z-index: 2; }
.radiostyle{
    background-color: #CCC;
    border-radius: 8px;
    padding: 4px4px4px1.75em;
}

.radiostyle:hover{
    background-color: #0F6;    
    cursor:pointer;
}
    
input[type=radio]:checked+label {
    /* Or `#a1:checked+label` if you only want it for that input */background-color: #0F6;
}

Solution 3:

The problem was the <input> was just preceding the <label> in the cat option, but in the dog option the <input> was inside the<label.

I corrected it by moving the <input> of the dog option to be preceding the label, you can see it working here:

http://jsfiddle.net/SxPvz/