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

但是，使用应用于标签的类而不是输入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对其进行适当的样式设置。

如何将jQuery样式应用于按钮？

1 个答案: