Modify radio button colors upon selection with a variety of colors

Question

Modify radio button colors upon selection with a variety of colors

Looking to create Yes/No buttons that start with a default state of null and change color when pressed - green for yes, red for no.

Check out this example 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's my jsfiddle - currently the button turns green for all selections, but I want it to turn red when "No" is clicked.

I've come across some similar solutions, however none seem compatible with JQM 1.4.2

javascript jquery html css jquery-mobile

Answer 1

Answer №1

To style the "No" label differently, you can simply add the class .no:

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

Next, include this CSS rule:

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

By doing this, you'll be able to easily add more buttons in the future if necessary.

Check out the demo here: http://jsfiddle.net/ambvdznb/6/

Answer 2

To style the "No" label differently, you can simply add the class .no:

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

Next, include this CSS rule:

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

By doing this, you'll be able to easily add more buttons in the future if necessary.

Check out the demo here: http://jsfiddle.net/ambvdznb/6/

Answer 3

Answer №2

If you only need to include two buttons and nothing more, this solution worked perfectly for my needs.

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

This code specifically targets the last active button within each form with the class ".myform". No additional markup or classes are necessary in your HTML! :)

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

Answer 4

If you only need to include two buttons and nothing more, this solution worked perfectly for my needs.

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

This code specifically targets the last active button within each form with the class ".myform". No additional markup or classes are necessary in your HTML! :)

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

Answer 5

Answer №3

To achieve the desired effect, simply include an additional selector for the specific number you want to target.

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

For a visual demonstration, check out this example http://jsfiddle.net/ambvdznb/

Answer 6

To achieve the desired effect, simply include an additional selector for the specific number you want to target.

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

For a visual demonstration, check out this example http://jsfiddle.net/ambvdznb/

Answer 7

Answer №4

It is recommended to apply the background-color property to the <label> element instead of the <input> element.

To begin, assign two unique IDs to your label elements:

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

Next, update your CSS to style the new elements accordingly:

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

You can then remove any existing background-color styling from the previous element.

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

Answer 8

It is recommended to apply the background-color property to the <label> element instead of the <input> element.

To begin, assign two unique IDs to your label elements:

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

Next, update your CSS to style the new elements accordingly:

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

You can then remove any existing background-color styling from the previous element.

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

Answer 9

Answer №5

To differentiate between the 'Yes' and 'No' buttons on your form inputs, you can assign them classes such as 'yesbutton' and 'nobutton' respectively. Then, using a simple CSS-selector, you can style them with different colors like shown below:

//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;
}

Answer 10

To differentiate between the 'Yes' and 'No' buttons on your form inputs, you can assign them classes such as 'yesbutton' and 'nobutton' respectively. Then, using a simple CSS-selector, you can style them with different colors like shown below:

//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;
}

Answer 11

Answer №6

Fiddle

Take a look at this alternative solution.. :)

.myform .ui-first-child.ui-btn-active {
background-color: blue !important;
border-color: #2E1F80 !important;
color: #000 !important;
text-shadow: none !important;
}
.myform .ui-last-child.ui-btn-active {
background-color: yellow !important;
border-color: yellow !important;
color: #000 !important;
text-shadow: none !important;
}

Answer 12

Fiddle

Take a look at this alternative solution.. :)

.myform .ui-first-child.ui-btn-active {
background-color: blue !important;
border-color: #2E1F80 !important;
color: #000 !important;
text-shadow: none !important;
}
.myform .ui-last-child.ui-btn-active {
background-color: yellow !important;
border-color: yellow !important;
color: #000 !important;
text-shadow: none !important;
}

Answer 13

Answer №7

Consider incorporating the following CSS code:

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

See Example on Jsfiddle

Answer 14

Consider incorporating the following CSS code:

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

See Example on Jsfiddle

Modify radio button colors upon selection with a variety of colors

Answer №1

Check out the demo here: http://jsfiddle.net/ambvdznb/6/

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Connecting two divs with lines in Angular can be achieved by using SVG elements such as

Having trouble getting dynamic values to render properly in Ionic select? Find a solution in Ionic 4

Creating a fresh array by applying a filter and assigning keys

Retrieving Data from Outside Source using AngularJS

Attempting to assign a value to the Progress Circle

Tips for structuring route dependencies in Node.js and Express

Check the dimensions of the image file entered using AngularJS on the client side

Whenever I include "border:0" in the styling of my hr element, a significant number of hr elements fail to appear on the screen

Can webpack effectively operate in both the frontend and backend environments?

Using jQuery ajax links may either be effective or ineffective, depending on the scenario. At times

What could be causing the bootstrap columns to automatically shift onto separate lines?

Concealing tooltip when button is clicked using jQuery

When you hover over the page, the content shifts to reveal a hidden div

What is the maximum number of files that FileUploader can accept when multi-select is enabled?

Create a debounced and chunked asynchronous queue system that utilizes streams

Searching through an array to isolate only image files

Is your jquery draggable bouncing around unexpectedly on the page when released?

What is the most effective method for incorporating parameterized aesthetics using CSS in a JSP program?

The Cordova imagePickerEx plugin is now also offering a feature to retrieve cached images

The controller function is not triggered if the user does not have administrator privileges