CODEWITHSUNDEEP
htmlcssbackgroundradio-button
user1660344
user1660344

Reputation: 39

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 option, but I'm stuck at the dog option. I need the dog option to work because I want the background change to include the circle button.

Please advise. Thank you.

Upvotes: 0

Views: 4876

Answers (3)

Ana
Ana

Reputation: 37178

See this:

DEMO

I changed a bit the HTML:

<div>
<input type="radio" name=1 Value=420 id="a1">
<label for="a1" class="radiostyle" >Cat ($420)</label>
</div>
<div>
    <input type="radio" name=1 Value=375 id="a2">
    <label for="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: 4px 4px 4px 1.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;
}

Upvotes: 0

Nelson Ben&#237;tez Le&#243;n
Nelson Ben&#237;tez Le&#243;n

Reputation: 50643

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/

Upvotes: 0

Abraham
Abraham

Reputation: 20694

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.

Upvotes: 1

Related Questions