CODEWITHSUNDEEP
jqueryhtmlcss
G D
G D

Reputation: 47

How can I fix individual css style for my dialog box button?

i am try do set the style in my dialog button in my jsp, i am using following code, but i got style both button , i want to be set individual style for each button ,

I am using jquery version ui 1.9

fiddle

jquery code:

$('#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" );
         }
     }
});

Upvotes: 0

Views: 402

Answers (2)

lizardhr
lizardhr

Reputation: 310

change the selector in your css to modify that button like this:

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;

}

updated jsfiddle

Upvotes: 0

mituw16
mituw16

Reputation: 5250

I think I see what you're after. Trying to style the buttons in the dialog right?

You can accomplish this with the nth-child() select.

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 */
}

Upvotes: 1

Related Questions