如何将jQuery样式应用于按钮

How to apply jQuery styles to a button?

本文关键字：应用于 按钮 样式 jQuery      更新时间：2023-09-26

我使用jQuery按钮，并有以下内容:

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不起作用

在这里，button元素不是围绕当前元素创建的。当前元素被隐藏，新元素被创建:

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

要改变按钮的样式，您需要更改CSS，或者在创建按钮后应用自定义类，例如http://jsfiddle.net/ahallicks/KGq56/8/:

$(function() {
    $( "#check" ).button().next().addClass("test");
});
  
但是，使用应用于标签的类而不是输入http://jsfiddle.net/ahallicks/KGq56/9/:

将HTML更改为以下内容更容易
<input type="checkbox" id="check"><label for="check" class="test">Toggle</label>

，那么你只需要做以下操作:
$(function() {
    $( "#check" ).button();
});
  
然后您可以使用类选择器.ui-button.test来适当地设置样式。
相关文章：