CODEWITHSUNDEEP
htmlcssjquery-mobile
Dima
Dima

Reputation: 443

How to force class ignore style settings

I'm using Jquery Mobile. When I create an input text for example select box, it wraps it with some HTML. one of the rows is:

<span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>

In our project we have a lot of overriding on those classes, especially ui-icon:

.ui-icon {
        background-size: 85px 700px !important;
}

so I get a page with those parameters, all my page get messy because of that.

Changing the style in all projects is a lot of work, how can I force my page to ignore this style (background-size) for that current class is ui-icon ?

Upvotes: 4

Views: 3388

Answers (2)

Lukas
Lukas

Reputation: 351

CSS styling takes the last style committed to it and then can only be overridden with Important, your question is very vague but you should be able to resolve this by hard coding the style on the element, 

<span class="ui-icon ui-icon-arrow-d ui-icon-shadow" style="background-size: 5px 5px !important;"></span>

Or to override the entire class with the !Important element. for this you have to create the style lastly called in your list of styles for that page only, so for instance creating the class on said page.

Other than that you could use Javascript to set the styling for that element specific by giving the Element an id,

 $('#txtBoxOverride').css('background', '5px 5px !important')

Upvotes: 1

iConnor
iConnor

Reputation: 20189

You cannot force a class to ignore styles (from what I know anyway).

I think the only option you have (with jQuery) is to over-ride the background-size

$('.ui-icon').css('cssText', 'background-size: auto auto !important');

Mind you I would never recommend coding like this, you are doing a lot wrong if you have to use !important in both CSS & JAVASCRIPT

Upvotes: 4

Related Questions