Question

我尝试在我的jsp中设置我的对话框按钮中的样式，我使用下面的代码，但我得到了样式两个按钮，我想为每个按钮设置单独的样式，

我正在使用jquery版本ui 1.9

jquery代码：

$('#success').dialog({
    autoOpen: true,
    height: 180,
    width: 350,
    modal: true,
    resizable: false,
    dialogClass: 'no-close',
    buttons: {
        "Add": function() {
            $(this).dialog("close");
            $( this ).dialog( "close" );
         },
         Cancel: function() {
            $( this ).dialog( "close" );
         }
     }
});

Answer 1

我想我知道你在追求什么。试图在对话框中设置按钮的样式吗？

您可以使用nth-child()选择来完成此操作。

http://jsfiddle.net/qP8DY/939/

<强> CSS

.no-close .ui-dialog-buttonset .ui-button:nth-child(1) .ui-button-text 
{
    background: red;
     /*Other Styles */
}

.no-close .ui-dialog-buttonset .ui-button:nth-child(2) .ui-button-text 
{
    background: blue;
    /*Other Styles */
}

Answer 2

更改css中的选择器以修改该按钮，如下所示：

button.ui-button:nth-child(1) {
background-color:#7bd217;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:8px;
padding:5px 26px;
text-decoration:none;
text-shadow:0px 2px 0px #2f6627;
position:relative;

}

更新jsfiddle

如何为对话框按钮修复单独的CSS样式？

2 个答案: