Apply CSS to jQuery Dialog Buttons

Question

So I currently have a jQuery dialog with two buttons  Save and Close  I create the dialog using the code below    dialogDiv dialog       autoOpen  false      modal  true      width  600      resizable  false      buttons            Cancel  function                                Cancel code here                     Save   function                                Save code here                      close  function                Close code here  incidentally  same as Cancel code              However  both buttons are the same color when this code is used  I d like my Cancel button to be a different color than my Save  Is there a way to do this using some built in jQuery options  I didn t get much help from the documentation   Note that the Cancel button I m creating is a pre-defined type  but  Save  I m defining myself  Not sure if that will have any bearing on the issue   Any help would be appreciated  Thanks   UPDATE  Consensus was that there were two roads to travel here    Inspect the HTML using a Firefox plugin like firebug  and note the CSS classes that jQuery is applying to the buttons  and take a stab at overriding them  Note  in my HTML  both buttons were used the exact same CSS classes and no unique IDs  so this option was out  Use a jQuery selector on dialog open to catch the button that I wanted  and add a CSS class to it then    I went with the second option  and used the jQuery find   method as I think this is more appropriate than using  first or  first-child b c the button that I wanted to change wasn t necessarily the first button listed in the markup  Using find  I can just specify the name of the button  and add CSS that way  The code I ended up with is below    dialogDiv dialog       autoOpen  false      modal  true      width  600      resizable  false      buttons            Cancel  function                                Cancel code here                     Save   function                                Save code here                          open  function                     ui-dialog-buttonpane   find  button contains  Cancel     addClass  cancelButtonClass                  close  function                Close code here  incidentally  same as Cancel code

User · Answer

You should change the word  className  for  class   buttons                    text   Cancel           class   ui-state-default2            click  function                    this  dialog  close

User · Answer

There is also a simple answer for defining specific styles that are only going to be applied to that specific button and you can have Jquery declare element style when declaring the dialog   id   button-delete   text   Delete   style   display  none    click  function         after doing that here is what the html shows    doing this allows you to set it  but it is not necessarily easy to change using jquery later

User · Answer

I   m reposting my answer to a similar question because no-one seems to have given it here and it   s much cleaner and neater   Use the alternative buttons property syntax    dialogDiv dialog       autoOpen  false      modal  true      width  600      resizable  false      buttons                          text   Cancel                class    cancelButtonClass               click  function                        Cancel code here                                                text   Save                class    saveButtonClass               click  function                        Save code here                                    close  function                Close code here  incidentally  same as Cancel code

User · Answer

Select the div which has role dialog then get the appropriate buttons in it and set the CSS      div role dialog  button contains  Save     css  color    green       div role dialog  button contains  Cancel     css  color    red

User · Answer

I think there are two ways you can handle that    Check using something like firebug if there is a difference  in class  id  etc   between the two buttons and use that to address the specific button Use something like  first-child to select for example the first button and style that one differently   When I look at the source with firebug for one of my dialogs  it turns up something like    lt div class  ui-dialog-buttonpane ui-widget-content ui-helper-clearfix  gt       lt button class  ui-state-default ui-corner-all ui-state-focus  type  button  gt Send lt  button gt       lt button class  ui-state-default ui-corner-all  type  button  gt Cancel lt  button gt   lt  div gt    So I could for example address the Send button by adding some styles to  ui-state-focus  with perhaps some additional selectors to make sure I override jquery s styles    By the way  I  d go for the second option in this case to avoid problems when the focus changes

User · Answer

Maybe something like this       ui-state-default first   addClass  classForCancelButton

User · Answer

I suggest you take a look at the HTML that the code spits out and see if theres a way to uniquely identify one  or both  of the buttons  possibly the id or name attributes   then use jQuery to select that item and apply a css class to it

User · Answer

Why not just inspect the generated markup  note the class on the button of choice and style it yourself

User · Answer

You can use the open event handler to apply additional styling    open  function event             ui-dialog-buttonpane   find  button contains  Cancel     addClass  cancelButton

User · Answer

If still noting is working for you add the following styles on your page style sheet   ui-widget-content  ui-state-default     border  0px solid  d3d3d3    background   00ACD6 50  50  repeat-x    font-weight  normal    color   fff      It will change the background color of the dialog buttons

[jquery] Apply CSS to jQuery Dialog Buttons

Examples related to jquery

Examples related to css

Examples related to jquery-ui

Examples related to button

Examples related to dialog