CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
alik
alik

Reputation: 2374

How to jquery disable theming on particular controls?

The web page uses jquery ui widgets for date picking etc as well se for popup context menus. For this, the page needs to refer to a jquery css. However, we prefer to use default browser style for submit buttons on a form. We are able to mark them manually. On the other hand, it is quite ok if styles are applied on the buttons which are part of the date picker widget.

I have tried several approaches like removeClass, className.replace in document.ready() or data-role=no but it does not work as expected. For example, it removes the style from the normal state but not from the hover or selected state of the buttons.

So how to disable jquery-ui them on selected buttons?

JS Fiddle

Upvotes: 0

Views: 58

Answers (1)

Szymon Toda
Szymon Toda

Reputation: 4516

In jQueryUI css (https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.min.css) change all selectors pointing to your button to exlude marked ones with :not() pseudoselector, for example:

.ui-state-default:not([type="submit"])

If you dont want to modify oryginal CSS (for ex. it's from CDN) after including it load another CSS (local one) with rules copied from oryginal but regarding only modified buttons and after each parameter do !important and reset every rule. Weak solution but works, you better end up editing source.

it is quite unrealistic to roll back to the browser-default button style

Than style them

.ui-state-default[type="submit"] { /* rules for excluded buttons */ }

Also [type="submit"] is an exclusion marker yourself proposed, excludor could be an class or whatever else for example:

.ui-state-default:not(.marked) { /* in jQueryUI */ }
.ui-state-default.marked { /* in your styles */ }

Upvotes: 1

Related Questions