How To Override Default Style For Button Jquery

Hi I am building a button on my page like that <

Solution 1:

you also can overwrite styles through css :

css file :

#insert-image-button.ui-button {
   background:red ;
   border-radius: 0px;
}

Solution 2:

You can apply different themes with jQuery UI: http://jqueryui.com/themeroller/.

Solution 3:

As Edgar already pointed out you can roll your own theme with the ThemeRoller.

If you prefer to use one of the preexisting themes you can easily include it from the Google Libraries API:

<link  href="http://ajax.googleapis.com/ajax/libs/jqueryui/{version}/themes/{theme}/jquery-ui.css"type="text/css" />

Replace {version} and {theme} with the ones you want to use.

Example using latest version (1.8.13) and the Smoothness theme:

<link  href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/smoothness/jquery-ui.css"type="text/css" />

For more info on jQuery UI themes and theming, take a look at the documentation.

Solution 4:

If you have very few instances of your custom styled content, you can always use inline styles like:

<div id = 'insert-image-button' style = 'background: red; border-radius: 0px;'>
</div>

Or simply set the css attributes in jQuery:

$('#insert-image-button').css('background','red').css('border-radius','0px'); 

// or use the alternative notation

$('#insert-image-button').css({ 'background': 'red','border-radius': '0px'});

// you can use classes too

$('.insert-image-buttons').css({ 'background': 'red','border-radius': '0px'});

And you can type this anywhere in your code.

Note that this doesn't override all UI styles (inline styles succeed more often), and it may not be altogether practical for finished projects. But it can still be a convenient way to test out different styles for your code.

Solution 5:

In my case I did like this

In my css file.

.myDialog.ui-dialog-buttonpane.ui-dialog-buttonset.ButtonStyle {
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 1px;
    font: 10pt'Myriad Pro Regular', sans-serif!important;
    font-weight: 800;
    color: #ffffff;
    background-color: #003668;
    border-left: 1px solid buttonhighlight;
    border-top: 1px solid buttonhighlight;
    border-right: 1px solid buttonshadow;
    border-bottom: 1px solid buttonshadow;
}

In my javascript file

functionShowDialog() {

    var options = {
        width: 600,
        height: 220,
        modal: true,
        autoOpen: false,
        resizable: false,
        closeOnEscape: false,
        my: "center",
        at: "center",
        of: window,
        dialogClass: "myDialog",
        buttons:[{
            text: "Close",
            "class": "ButtonStyle",
            click:
            function(){
                // I declared theDialog  globallyif (theDialog != null) {
                    theDialog.dialog("close");
                }
            }
        }]  
    };

    theDialog = $("#divMultipleMatchPopup").dialog(options);
    var ret = theDialog.dialog("open");
}