What are the steps to customize the CSS style of a specific button in my dialog box?

I am trying to set the style for my dialog button in my JSP. The code I'm using is affecting both buttons, but I want to apply individual styles to each one.

Currently, I am using jQuery version UI 1.9

Here's a fiddle link

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

Answer №1

It seems like you want to customize the appearance of the buttons in the dialog, am I right?

You can achieve this by using the nth-child() selector.

Check out this example on jsFiddle

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

Transform the selector in your CSS to customize that button in the following way:

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;

}

Check out the updated jsfiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Identify alterations in an input field after selecting a value from a dropdown menu

Is there a way to detect changes in the input field when selecting a value from a drop-down menu, similar to the setup shown in the image below? html: <input type="text" class="AgeChangeInput" id="range"/> js:(not working) <script> $(docume ...

javascriptjquery

Is it necessary for every single product to have its very own webpage?

As a newcomer to the world of web development, I'm uncertain about the standard practices. Currently, I am working on creating a small e-commerce website with a wide range of products. Is it recommended to give each item its own dedicated page? Furthe ...

webseohtmlweb-standards

Having issues with Bootstrap 4's bg-inverse not displaying correctly?

While attempting to replicate the navbar example from Bootstrap's documentation, I encountered an issue where the background color of the navbar was not loading properly. <nav class="navbar navbar-inverse bg-inverse"> <a class="navbar-br ...

cssbootstrap-4

Adjusting the size of a React element containing an SVG (d3)

In my simple react app, I have the following component structure: <div id='app'> <Navbar /> <Graph /> <Footer /> </div> The Navbar has a fixed height of 80px. The Footer has a fixed height of 40px. The Graph i ...

cssreactjsd3.jssvgresize

Having trouble getting a PHP variable to show up within HTML using echo

Apologies in advance for any language mistakes, English isn't my first language. I'm tasked with creating a website linked to a database for school. I've made progress in setting up the database and writing PHP and HTML pages, but I've ...

phphtmlmysqldatabase

Adding data to the SharePoint RichText Control using the WinForms WebBrowser Control

I am struggling to modify the content of an SP Rich Text field using the WinForms web browser control. While changing the values of other controls is straightforward, I have encountered difficulties with Rich Text fields. I found some suggestions on this b ...

javascripthtmlsharepointbrowsercontrols

Error message "Function not defined while attempting to update ajax synchronization"

I have been working on converting a function that previously used to load synchronous ajax requests to getDesign.php. This PHP file requests some images which are then displayed on the screen using the loadImages function. Before the change, the code look ...

jqueryajax

Issue encountered while using JSONP: {"readyState":4,"status":200,"statusText":"load"}

After sending a command to an external server through the URL, the HTML code shows {"readyState":4,"status":200,"statusText":"load"}, but in the console, the correct data is displayed as shown in the image. Need any assistance? https://i.sstatic.net/MQ ...

phpjqueryajax

Problem with CSS hovering on images when hovering on links?

While attempting to add 2 hover images to my website, I encountered an issue where a black border appeared in the middle of the images. This was caused by the hover effects on the links. Below is the code snippet: a:hover,a:active { color:Black; o ...

htmlcss

How can I make an element begin sticking to the page at 50px when scrolling, and then stop sticking at 2000px?

I am looking for a solution to position an image relative or absolute initially, then make it stick after some scrolling, and finally return it to its original behavior before transitioning to another section on the page. I've tried using this script ...

jquerycssscrollposition

What's the best way to ensure an endless supply of copied elements with identical classes to the clipboard?

Here is a snippet of my HTML code: <Div Class='POSTS'> <Div Class='POST'> <Div Class='CONTENT'>Text1</Div> </Div> <Div Class='POST'> <Div Class=&apos ...

javascripthtmljquerycopyclipboard

Random image generator using jQuery on the home page body

Hey guys, I'm working on a cool feature for my Wordpress site where a random background image loads every time the homepage is refreshed. Check out the code snippets below: First, here's what I have in my style sheet (style.css): body.home { ...

phpjqueryhtmlcsswordpress

How to extract the YouTube video source using jQuery from an iframe snippet

Currently, I am attempting to extract the YouTube source from an iframe embed code and store it as a variable. Suppose my YouTube embed code looks like this: <iframe width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://w ...

jqueryhtmliframeyoutube

A minimalist dropdown menu using only HTML and CSS with an onclick function

I have been working on creating an onclick dropdown menu for mobile devices that should disappear when viewed on wider screens, but I've encountered an issue where the links in the menus are not clickable even though the @media query is set up correct ...

htmlcss

Styling ReactJS Components with CSS Styling

I am a complete beginner to React and I seem to be facing an issue with rendering CSS properly. The react class, App, that I have should display a Card with a progress tracker on it. var App = React.createClass({ render: function () { var pushNotific ...

htmlcssreactjs

I am trying to retrieve the class name of each iframe from within the iframe itself, as each iframe has a unique class name

My index HTML file contains multiple Iframes. I am trying to retrieve the class names of all iframes from inside an iframe. Each iframe has a different class name. If any of the iframes have a class name of 'xyz', I need to trigger a function. I ...

javascriptjqueryhtmliframe

How is the height and width of the header determined?

When examining the theme by clicking "inspect element" on the green portion (<header> ), you will notice that the height and width properties have pixel values that change dynamically as the window is resized. So, where do these values originate fr ...

csshtmltwitter-bootstraptwitter-bootstrap-3

Leveraging the power of jQuery in combination with the <audio> element and PHP/MySQL to enable looping of playback

Currently, I am facing an issue with a page that contains an iframe. The iframe is utilizing jquery.scrollTo to monitor the audio playback time and synchronize the contents (like lyrics) to the corresponding point in the audio track. Each line of text is ...

phpjquerymysqlaudioiframe

Executing iterations within the document.ready function using jQuery and d3.js

Here is how my data is structured: var IDData = JSON.stringify([["node/105173", "node/38180995", "Agent", "Customer", "1379644.0", 1, 264.0, "1374903"]...] Each row in the data follows the same format, although the length of the array arrays can vary. I ...

javascriptjqueryd3.js

getting the child td element within a tr using a variable that changes dynamically

I'm facing an issue where I am trying to access the <td> of a <tr> using the jQuery .eq() function. The code snippet below illustrates what I am attempting: var foundElement = 3; var values = $(this).children("td:nth-child('" + foun ...

javascriptjqueryparent-child