9

Using jQuery UI I have two radio buttons, Approve/Reject, which I would like to style independantly, so when 'Approve' is selected, it will be blue, and when 'Reject' is selected, it will be red:

Nothing selected

Approve selected

Reject selected

Apologies for my terrible red button mockup :-) Hopefully this will give you an idea of what I'm after. I've tried changing the class of both buttons/labels, but this isn't then reflected onto the jQuery-UI overlay.

Here's my current code that is generating the buttons, and also displaying a tick or a cross depending on the selection:

$('.approvedToggle').buttonset();

$('input:radio').click(function() {
    if($(this).val() === 'approve') {
        $(this).parent('div').children(".tick").show();
        $(this).parent('div').children(".cross").hide();
    } else {
        $(this).parent('div').children(".tick").hide();
        $(this).parent('div').children(".cross").show();
    }
});

Any help would be much appreciated - thanks!

Nick
  • 3,745
  • 20
  • 56
  • 75
  • 1
    Do you have a way to differentiate the two buttons types? (Seeing some of your markup and styles would help here.) From your screenshot, it looks like the blue tint is applied to `.ui-button.ui-state-active` directly in the theme (no code required), is this actually the case? – Frédéric Hamidi May 10 '12 at 14:57
  • 1
    Can you post the jQuery you've tried? – j08691 May 10 '12 at 15:08
  • Thanks, I have posted my current jQuery which at least shows a tick/cross depending on the selection – Nick May 10 '12 at 15:12

2 Answers2

22

What you need to do is override the jQuery UI default styling.

Here's what the documentation states:

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.button.css stylesheet that can be modified. These classes are highlighed in bold below.

Sample markup with jQuery UI CSS Framework classes

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"> <span class="ui-button-text">Button Label</span> </button>

So basically, what you can do, is something like this:

HTML:

<div id="approvedToggle">
    <input type="radio" id="ApproveButton" name="radio" />
    <label id="ApproveButtonLabel" for="ApproveButton">Approve</label>

    <input type="radio" id="RejectButton" name="radio" />
    <label id="RejectButtonLabel" for="RejectButton">Reject</label>
</div>​


CSS (Important! This styling MUST be declared AFTER the jQuery UI CSS file):

#ApproveButtonLabel.ui-state-active { background: blue; }
#ApproveButtonLabel.ui-state-active span.ui-button-text { color: red; }

#RejectButtonLabel.ui-state-active { background: red; }
#RejectButtonLabel.ui-state-active span.ui-button-text { color: blue; }


jQuery:

$('#approvedToggle').buttonset();​


Output:

enter image description here


See the working jsFiddle demo

Code Maverick
  • 20,171
  • 12
  • 62
  • 114
  • 1
    I'm curious; does the custom css has to be declared after jquery ui? Wouldn't classes prefixed with id, `#id.ui-state-active` carry more weight and automatically overwrite the default `.ui-state-active` regardless of it's position? – ephemeron May 10 '12 at 16:08
  • 4
    In this specific case, yes. However, if you were to override *all* button active states, you would be using the class selector only, and thus, it would need to be declared after the jQuery UI css file. As a best practice, I always include my overriding jQuery UI css styles after the jQuery UI css master file. – Code Maverick May 10 '12 at 16:35
  • This is absolutely perfect, in every way - thank you so so much! :-) – Nick May 10 '12 at 16:46
  • @CodeMaverick - How do you make it work for multiple radio buttons? Basically, I am implementing a similar feature for my work and I have created several buttons to show whether its Approved or Rejected. Currently, I have declared `#approvedToggle` as a Class entity instead, so that I could apply for on other buttons. But everytime when I click a Approved or Rejected button, it seems to apply the same format and color for the rest of the buttons. How do I make it separate? – Jeiman Sep 11 '14 at 04:52
  • @Jeiman - IDs are unique, therefore multiple `#approvedToggle` declarations would be invalid HTML. You simply need to change `id=approvedToggle` to `class=approvedToggle` and then your jQuery call would be `('.approvedToggle').buttonset();`. See how it replaces the `#` with a `.`? That's how you differentiate between a unique id and a class. – Code Maverick Sep 11 '14 at 13:43
1

I use this for JQueryUI Button

CSS :

button.red-button
{
   background:radial-gradient(#FF0000,#660000);
   color:white;
   border-color:#660000;
}
button.red-button:hover
{ 
    background:radial-gradient(#FF0000,#880000);
   color:white;
   border-color:#660000;
}
button.red-button:active
{
    background:radial-gradient(#FF0000,#660000);
   color:white;
   border-color:#660000;
}

html :

<button class="red-button">Button</button>

For you case maybe can use :

CSS:

input.red-button
input.red-button:hover
input.red-button:active
Artron
  • 256
  • 1
  • 4
  • 13