CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
falter
falter

Reputation: 13644

Change radio button color on click with multiple colors

I'm trying to create Yes/No buttons which have a default state of null, and when pressed, yes goes green, and no goes red.

Here is an example of the code:

<label class="formheading">Apparatus group is correct</label>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false" class="right">
    <input type="radio" name="q2" id="q2y" value="Yes">
    <label for="q2y">Yes</label>
    <input type="radio" name="q2" id="q2n" value="No">
    <label for="q2n">No</label>
</fieldset>

Here is my jsfiddle - as you can see I've only managed to change the button to green for all buttons... but what I'd like is for No to become red once pressed.

I've found some similar solutions, however none seem to work with JQM 1.4.2

Upvotes: 1

Views: 5042

Answers (7)

Max Liashuk
Max Liashuk

Reputation: 1053

Just add additional selector for No.

.myform .ui-btn-active[for="q2n"] {
    background-color: red !important;
    border-color: red !important;
}

See here http://jsfiddle.net/ambvdznb/

Upvotes: 1

Akash Sarawagi
Akash Sarawagi

Reputation: 207

Fiddle

check it other working answer.. :D

.myform .ui-first-child.ui-btn-active {
background-color: green !important;
border-color: #1F802E !important;
color: #fff !important;
text-shadow: none !important;
}
.myform .ui-last-child.ui-btn-active {
background-color: red !important;
border-color: red !important;
color: #fff !important;
text-shadow: none !important;
}

Upvotes: 0

Markai
Markai

Reputation: 2098

You can give the labels for the inputs classes like 'yesbutton' and 'nobutton' and then use a simple css-selector to give them different colors like this:

//html

<div class="myform">
    <label class="formheading">Question 2</label>

    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="false" class="right">
        <input type="radio" name="q2" id="q2y" value="Yes">
        <label for="q2y" class="yesbutton">Yes</label>
        <input type="radio" name="q2" id="q2n" value="No">
        <label for="q2n" class="nobutton">No</label>
    </fieldset>
</div>

//css

.right {
     float: right !important;
}
.myform {
    padding:20px;
}
.myform .ui-btn-active.yesbutton {
    background-color: green !important;
    border-color: #1F802E !important;
    color: #fff !important;
    text-shadow: none !important;
}
.myform .ui-btn-active.nobutton {
    background-color: red !important;
    border-color: #1F802E !important;
    color: #fff !important;
    text-shadow: none !important;
}

Upvotes: 0

tudor
tudor

Reputation: 508

The background-color property should be applied to the <label> instead of <input>.

First declare two ids for your elements:

...
<label for="q2y" id="q2yl">Yes</label>
...
<label for="q2n" id="q2nl">No</label>

And then extend your CSS for the new elements:

.myform #q2yl.ui-btn-active {
    background-color: green !important;
}
.myform #q2nl.ui-btn-active {
    background-color: red !important;
}

You can remove the existing background-color from your previous element.

.myform .ui-btn-active {
    border-color: #1F802E !important;
    color: #fff !important;
    text-shadow: none !important;
}

Upvotes: 0

Vladimirs
Vladimirs

Reputation: 8599

Try to add that css rule:

.myform .ui-btn-active[for=q2n] {
background-color: red !important;
}

Jsfiddle

Upvotes: -2

dfsq
dfsq

Reputation: 193261

You can add class .no to "No" label:

<label for="q2n" class="no">No</label>

and add this rule:

.myform .ui-btn-active.no {
    background-color: red !important;
    border-color: crimson !important;
    color: #fff !important;
    text-shadow: none !important;
}

This would allow you to have more buttons in future if you need.

Demo: http://jsfiddle.net/ambvdznb/6/

Upvotes: 2

jleggio
jleggio

Reputation: 1286

If you don't plan on adding any other buttons other than two, this worked great for me..

.myform .ui-btn-active.ui-last-child{
    background-color: red !important;
    border-color: red !important;
}

This selects the last .ui-btn-active inside of each .myform element. You also don't have to add any extra mark up or classes to your HTML! :)

JFIDDLE: http://jsfiddle.net/ambvdznb/2/

Upvotes: 2

Related Questions