Changing color of jQuery UI Buttons

Question

Is there an easy way to change the color of a jQuery UI Button? Modifying the css is discouraged from the documentation and doing so anyway is tricky. They say, "We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain." I understand how to change the theme, but then how do you get different colored buttons on the same page?

score 18 · Accepted Answer · edited Oct 17 '12 at 11:37

18

I just did this: create a new theme with the new colour button; copy the ..hard.. and ..soft... gradient files from the new theme images folder; rename them so as to not confuse them with the main theme; and finally add the style to the button. This caters for the gradient and the colour...

I just tried this for a green button:

a.green-button
{
    background: url(Images/GreenBGHardGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:hover
{ 
    background: url(Images/GreenBGSoftGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:active
{
    background-color:#FFFFFF;
    border: 1px solid #132b14;
    color:#132b14;
}

edited Oct 17 '12 at 11:37

quarkonium

322
3
13

answered Feb 15 '11 at 15:42

Mark Redman

24,079
20
92
147

I did something along these lines, but used css gradient backgrounds instead. I should've updated the question with my solution... instead I'll credit you with the answer. – at. Feb 16 '11 at 09:13
I had also experimented with these solutions earlier... and personally i preferred the above answer rather than gradients. Primarily because gradient support is not uniform across browsers. Moreover You can custom the same background texture with the above solution whereas with gradients you may not be able to get the same texture. Drawback is that you are accessing another image element - but if you are using jqueryui, you are already accessing number of images - 1 more shouldnt make much diff. – user1517108 Apr 05 '13 at 09:24

score 8 · Answer 2 · answered Dec 08 '10 at 22:02

8

Simplest way would be to add a class to your buttons (for different colors) and then have some css that overwrites the jquery-ui css.

Example

var $button = $(document.createElement('a'));
//add class
$button.addClass('redButton');
//call the jquery-ui button function
$button.button();

Css

.ui-button.redButton {
    background-color: red;
}
.ui-button.greenButton {
    background-color: green;
}

answered Dec 08 '10 at 22:02

joekarl

2,118
14
23

1

setting the background-color to red doesn't actually change the button color – at. Dec 08 '10 at 23:02
2

The button backgrounds are images rather than simple colors, you'd need to change `background-image` and possibly add `!important` to force the issue. – mu is too short Dec 09 '10 at 05:15
9

you can just put `background:red`. jquery uses the background element to set the image, so using it to set the color will replace the image – ContextSwitch Jul 28 '12 at 21:45

score 3 · Answer 3 · edited Sep 02 '14 at 04:11

3

Try this:

HTML:

<button type="button" id="change_color"> change button </button>

jQuery:

$("#change_color").css("background","green");

edited Sep 02 '14 at 04:11

Tiago Marinho

2,146
17
37

answered Sep 02 '14 at 04:03

Praveen Kumar K R

1,762
2
11
7

yPhil · Answer 4 · 2018-02-27T14:18:14.643

There are two (three?) types of JQueryUI buttons ; Basically you make a button like this:

<span class="myButtons">Click here</span>

Then you tell JQueryUI that it's a button:

$('span.myButtons').button()

Thus producing this markup:

<span class="myButtons ui-button ui-corner-all ui-widget" role="button">Click here</span>

And you can style this the "classic" way: (.myButtons {}, .myButtons:hover {} etc.)

But !

If your "button" is one of checkboxradio or controlgroup then it's another markup:

<fieldset>
  <legend>Select a Location: </legend>
  <label for="radio-1">New York</label>
  <input type="radio" name="radio-1" id="radio-1">
  <label class"danger" for="radio-2">Paris</label>
  <input type="radio" name="radio-1" id="radio-2">
  <label for="radio-3">London</label>
  <input type="radio" name="radio-1" id="radio-3">
</fieldset>

Then if you apply the method:

$( "input" ).checkboxradio();

You get this generated markup (the 2nd pseudo button, "Paris" is checked/clicked):

<fieldset>
      <legend>Select a Location: </legend>
      <label for="radio-1" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>New York</label>
      <input name="radio-1" id="radio-1" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio">
      <label for="radio-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label ui-checkboxradio-checked ui-state-active"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>Paris</label>
      <input name="radio-1" id="radio-2" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio">
      <label for="radio-3" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>London</label>
      <input name="radio-1" id="radio-3" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio">
</fieldset>

And then those classes can (must?) be used to style the pseudo "buttons":

.ui-visual-focus {
  box-shadow: none;
}

label.ui-checkboxradio.ui-state-default {
  color: black;
  background-color: teal;
}

label.ui-checkboxradio.danger.ui-state-active {
  background-color: red;
}

Changing color of jQuery UI Buttons

4 Answers4

But !

Linked