Customizing jQueryUI Button: Changing the Color of Button Icons

I have embedded an HTML button within a div using the following structure:

<div class="ui-state-highlight">
    <button type="button" class="ui-button ui-state-default ui-corner-all ui-button-text-icon-primary">
        <!-- first span -->
        <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
        <!-- second span -->
        <span class="ui-button-text">Save</span>
    </button>
    <!-- third span -->
    <span class="ui-icon ui-icon-info"></span>
    <strong>All</strong> form fields are required.
</div>

With the div being assigned the class:ui-state-highlight, the icon color of the button has changed to blue.

Is there a method I can utilize to switch back the icon color to its original: default (black) hue?

Moreover, I am looking to apply the effect (color) of ui-state-highlight to the icon in the third span.

I have attempted adding ui-state-default solely to the first span where the icon is located, but this did not achieve the desired outcome.

javascriptjquerycssjquery-uijquery-ui-button

Answer №1

To resolve the issue, adjust the styling of the containers (e.g. divs and spans) that have the ui-state-highlight class applied to them.

Answer №2

To enhance the appearance of your website, consider adding a new style that includes a path to images featuring default (black) icon color ()

Update:

You could also modify the outer div class to ui-state-default:

<div class="ui-state-default">
    <button type="button" class="ui-button ui-state-default ui-corner-all ui-button-text-icon-primary">
        <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
        <span class="ui-button-text">Save</span>
    </button>
</div>

Answer №3

Create a unique style of your own by following these steps:

.ui-icon-custom { background-image: url(images/custom.png); }

Simply apply this style when using .button(), like so:

$('#button').button({
  label: 'Test',
  icons: {primary: 'ui-icon-custom', secondary: null}
});

This assumes that your custom icon is located in the images folder within your CSS directory, where the jQuery UI icon map is typically found. The created icon will have a class like this: class="ui-icon ui-icon-custom", and the ui-icon class has the following properties (potentially a different image based on theme):

.ui-icon { 
  width: 16px; 
  height: 16px; 
  background-image: url(images/ui-icons_222222_256x240.png); 
}

In your custom style, you can overwrite the background-image property as needed or adjust the width, height, etc.

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

Hidden bootstrap 4 custom checkbox issue

I tried to implement Bootstrap 4 custom control for a checkbox by following the documentation, but the checkbox isn't appearing. Can anyone spot what I might be doing incorrectly? <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css ...

cssbootstrap-4

Learn how to design a Bootstrap 4 modal confirm dialog similar to the javascript confirm feature

I am interested in utilizing Bootstrap 4's native modal to create a confirm dialog without relying on external plugins like Bootbox or similar JavaScript confirm windows. JavaScript if (!confirm("Are you sure?")) return false; To achieve this, I ha ...

jquerybootstrap-4

Tips for uploading numerous images to Firebase using React Native Fetch Blob

I have a collection of images stored in an array (image paths are stored in the array). I am trying to upload each image using a for loop, but only the last image gets uploaded. My approach involves using React Native Fetch Blob and Firebase for this task. ...

javascriptfirebase-storagereact-native

The ngModel in AngularJS 2 fails to update when the Jquery Date Picker date is changed

Having an issue with the Jquery UI datepicker within an angularjs 2 component. The datepicker is displaying the changed date, but it's not updating the underlying ngModel: dateSelected. dateSelected: string = ''; The date picker input fie ...

jquery-uiangulardatepicker

Validation problem encountered on client side in a partial view

Currently, I am tackling client-side validation on a partial view. I have attempted to load the jQueryVal bundle on the master page but unfortunately, it is not functioning as expected. @Scripts.Render("~/bundles/jqueryval") Interestingly, the same bundl ...

jqueryasp.net-mvcpartial-viewsunobtrusive-validation

Is there a way to prevent Backbone.js from deleting surrounding elements with 'default' values?

Trying to articulate this question is a challenge, so please let me know if further clarification is needed. As I am new to backbone.js, my inquiry may seem basic. My goal is to utilize backbone to efficiently generate graphs using the highcharts library. ...

javascriptbackbone.js

Ajax encountering issues when uploading large files

Using jQuery's ajax to upload files can be tricky $("#transfer").live("click", function() { var data = new FormData(); data.append("your_email", $("#your_email").val()); data.append("your_message", $("#your_message").val()); $.each( ...

phpjqueryajaxfile-uploadxmlhttprequest

Moving a Div to the Center of the Screen Using Jquery and Masonry JS

I am currently utilizing Jquery Transit and Masonry JS within my project. Within a specific div, there is a button which, when clicked, is intended to change the container's position to fixed and center it on the screen using Jquery Transit. However, ...

javascriptjquerycssjquery-masonryjquery-transit

Send the contents of a `<ul>` element to the server using AJAX for form submission

Can someone assist me in submitting a serialized <ul> list through an AJAX post form request? I need help with this process. Below is my current code snippet. HTML: <form id="update_fruit_form" method="post" action="/update_fruits" accept-charse ...

javascriptjqueryajax

What is the best way to align row elements in Bootstrap?

Hey there everyone! I've been grappling with a challenge for the past few days on how to center the contents of a Bootstrap row. Let me elaborate: The row has 12 columns (as is standard in Bootstrap). However, in my design, I'm only utilizing 9 c ...

javascripthtmlcssweb

Header position displays incorrectly in Internet Explorer due to CSS

I'm experiencing an issue with the header position on my website, as it always aligns to the left side in IE. However, in Chrome and Firefox, it is perfectly centered without any problems. Can anyone offer their expertise on how to resolve this? Hom ...

cssinternet-explorerheader

Utilize environment variables to access system information when constructing an Angular 2 application

In order to build my Angular application, I want to utilize a single system variable. System Variable server_url = http://google.com This is how my Environment.ts file looks: export const environment = { production: false, serveUrl: 'http://so ...

javascriptangular

Implement a single CSS menu across various HTML pages

I'm currently working on developing a website. All of my pages have a common menu bar that I would like to include from a separate HTML file. Is there a way to include HTML files in order to address this concern? If so, what is the syntax for imple ...

htmlcss

Enhancing Filtering Capabilities with Multiple ng-Model in AngularJS

I am facing an issue with filtering a form based on user input in a text box or selection from a dropdown list. The text box filter works fine individually, but when I try to combine it with the dropdown list selection, neither filter seems to work. Below ...

javascriptangularjs

Using Spring Boot to create a multiple select feature with Materialize CSS

Currently engaged in a Spring Boot project utilizing Materialize CSS for the frontend. Everything runs smoothly when running the HTML file independently, with the Materialize CSS multiple select feature working perfectly. However, upon integrating the HTML ...

javajqueryspring-bootmaterialize

Issues encountered while trying to style an unordered list using the table-cell property

I am having trouble formatting the "How it works" section on my website. When the text is too long, the numbers on the left side grow alongside it as shown in number 4. Is there a way to keep the numbers fixed on the left while allowing the text to expand ...

htmlcss

Angular 2 form validation enhancements

How can I implement a combined validation in Angular2 using OR statements in a Control Group? For example, I have three input fields and I want one to be required, and the other two with an OR requirement. [Input name] = Required, ([Input email] OR [Input ...

javascripthtmltypescriptangular

Encountering an issue while retrieving data from my personal server: "Error message states 'Unexpected end of JSON input'."

As a beginner in Backend development, I decided to experiment with API calls and Client-Server interactions. const express = require("express"); const cors = require("cors"); const fetch = require("node-fetch"); const app = e ...

javascriptjsonreactjsexpressserver

Is there a way to emphasize my navigation using a call-to-action (CTA)?

My CTA is set up like this: <div class="heading__link"> <a class="heading__cta" href="#about">View my work</a> </div> Additionally, my navigation bar is structured like this: <nav id=&quo ...

javascripthtmlcss

What should we name the array in Json/PHP?

Through AJAX, I am able to fetch the latest document date from the database based on category (such as invoice, orders, etc.) using the following query: // Multiple documents can exist in each category $stmt = $bdd->prepare('SELECT file_name, max ...

phpjqueryjson