Changing Color Of Jquery Ui Buttons

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 usi

Solution 1:

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

Solution 2:

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

Solution 3:

Try this:

HTML:

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

jQuery:

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

Solution 4:

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

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

Then you tell JQueryUI that it's a button:

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

Thus producing this markup:

<spanclass="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><labelfor="radio-1">New York</label><inputtype="radio"name="radio-1"id="radio-1"><labelclass"danger" for="radio-2">Paris</label><inputtype="radio"name="radio-1"id="radio-2"><labelfor="radio-3">London</label><inputtype="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><labelfor="radio-1"class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><spanclass="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><spanclass="ui-checkboxradio-icon-space"></span>New York</label><inputname="radio-1"id="radio-1"class="ui-checkboxradio ui-helper-hidden-accessible"type="radio"><labelfor="radio-2"class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label ui-checkboxradio-checked ui-state-active"><spanclass="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><spanclass="ui-checkboxradio-icon-space"></span>Paris</label><inputname="radio-1"id="radio-2"class="ui-checkboxradio ui-helper-hidden-accessible"type="radio"><labelfor="radio-3"class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><spanclass="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><spanclass="ui-checkboxradio-icon-space"></span>London</label><inputname="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;
}