How to override jQuery UI Widget Styles and Keep the Functionality

coding-style, jquery, jquery-ui, user-interface

Solution

In order to override the jquery-ui css use the `!important` tag.

.ui-dialog {
  background-color: black !important;
  }

Problem

I am using jQuery UI for an in-house application. I am looking for an easy way to remove all style information provided by jQuery UI on a given widget instance. I'm open to really anything, but a reusable javascript solution would be perfect. It's absolutely imperative that no functionality is lost. the most important thing is that all background-images are removed, I'm ok with keeping the layout styles. ideally something like... ``` $tabs = $("#someElement").tabs(); $tabs.removeStyles(); ``` But I'm open to whatever allows me to modify widget styles in a flexible way. The end goal is to have as much control of styles as possible

Original source