如何將jQuery樣式應用於按鈕？

Question

我使用jQuery Button，並具備以下條件：

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> 

腳本：

$(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; 

} 

我用.ui-button .test一個按鈕，但CSS不起作用。

Answer 1

由於在這個小提琴中，按鈕元素不是圍繞當前元素創建的。當前元素是隱藏的，一個新創建：

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

以不同樣式的按鈕，你將需要改變的CSS，或已被創建後，如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以適當地設計它。