4

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 ?

VahidNaderi
  • 2,448
  • 1
  • 23
  • 35
Dima
  • 443
  • 2
  • 9
  • 23
  • 2
    [Don't use `!important`.](http://stackoverflow.com/q/3706819/139010) – Matt Ball Sep 03 '13 at 12:41
  • I'm not entirely convinced it's a dupe, though I think it overlaps with your own question, but have you looked at: [jQuery mobile - dynamically changing CSS with JavaScript](http://stackoverflow.com/questions/4731238/jquery-mobile-dynamically-changing-css-with-javascript)? – David Thomas Sep 03 '13 at 13:07
  • do you want to turn off JQM styles on input? – Omar Sep 03 '13 at 13:52
  • http://fiddle.jshell.net/Palestinian/7VvFy/ – Omar Sep 03 '13 at 14:12
  • @Omar It something similar to what I was searching, but I interesting in disabling a specific value, for example background-size. – Dima Sep 08 '13 at 09:00
  • Could you please make a jsfiddle to show us what you exactly need. – Omar Sep 08 '13 at 19:53

2 Answers2

4

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

iConnor
  • 19,997
  • 14
  • 62
  • 97
  • jQuery doesn't understand `!important` that's why we are applying it directly with cssText. – iConnor Sep 03 '13 at 12:55
  • There's really no point in using `!important` in an inline style attribute. – Matt Ball Sep 03 '13 at 13:12
  • @MattBall and why is that? `!important` rules over-ride inline styles. – iConnor Sep 03 '13 at 13:13
  • I use `!important` in my user styles - using Stylish in browser. It is pretty useful in here, but I guess it would be way less effective if it was used in the original CSS, too. – Vlasec Feb 18 '16 at 10:37
1

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')
Lukas
  • 352
  • 1
  • 2
  • 12