CODEWITHSUNDEEP
javascriptcss
user3422998
user3422998

Reputation: 105

How to apply jQuery styles to a button?

I'm using jQuery Button and have the following:

HTML:

<input class="test" type="checkbox" id="check"><label for="check">Toggle</label>
<input class="test2" type="checkbox" id="check2"><label for="check2">Hello</label>

Script:

$(function() {
  $( "#check" ).button();
});
$(function() {
  $( "#check2" ).button();
});

CSS:

.ui-button .test {
    font:  12px Verdana, Helvetica, sans-serif;
    border-radius: 10px;
    border: 0;
    padding-top: 55px;
    background-image: url(graphics/move.png);
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 48px 48px;
    box-shadow: 0 4px 4px 0 #888;
    background-position:center 10px;

}

I used .ui-button .test for one button but the CSS is not working.

Upvotes: 1

Views: 552

Answers (1)

Alex
Alex

Reputation: 7374

As in this fiddle the button element is not created around the current element. The current element is hidden and a new one is created:

http://jsfiddle.net/ahallicks/KGq56/1/

To style the button differently you would need to change the CSS, or apply a custom class to the button after it has been created such as http://jsfiddle.net/ahallicks/KGq56/8/: 

$(function() {
    $( "#check" ).button().next().addClass("test");
});

However, it is easier to change the HTML to the following with the class applied to the label, not the input http://jsfiddle.net/ahallicks/KGq56/9/:

<input type="checkbox" id="check"><label for="check" class="test">Toggle</label>

then you would only need to do the following: 

$(function() {
    $( "#check" ).button();
});

Then you can use the class selector .ui-button.test to style it appropriately.

Upvotes: 2

Related Questions