Apply CSS Class ( !important ) to a TextBox using JQuery

Question

HTML looks like

<td>
    <input type="text" onkeydown="" style="" value="" id="v65-onepage-billlastname" name="BillingLastName" maxlength="50" size="25" class="co-text">
</td>

My CSS Class (please note i can't change the .CSS file as its called remotely from some other server)

#v65-onepage-billfirstname, #v65-onepage-billlastname, #v65-onepage-billcompanyname, #v65-onepage-billaddr1, #v65-onepage-billaddr2, #v65-onepage-billcity, #v65-cart-billemail, #v65-onepage-shipfirstname, #v65-onepage-shiplastname, #v65-onepage-shipcompanyname, #v65-onepage-shipaddr1, #v65-onepage-shipaddr2, #v65-onepage-shipcity {
    width: 280px !important;
}

To override the CSS and change the width of v65-onepage-billlastname to 150px using Jquery what is the method used

Possible duplicate of http://stackoverflow.com/questions/462537/overriding-important-style-using-javascript — Kevin B, May 31 '12 at 15:18
!important is usually an indicator that you need to re-factor your CSS. Try to avoid it at all costs. You're better off making your CSS more specific: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ — Diodeus - James MacFarlane, May 31 '12 at 15:19
"*please note i cant change the .CSS file as its called remotely from some other server*" — Kevin B, May 31 '12 at 15:19

Fabrizio Calderan · Accepted Answer · 2012-05-31T15:47:58.960

4

without mixing javascript and css, just define two CSS rules

#v65-onepage-billfirstname { width: 280px !important }
#v65-onepage-billfirstname.afterJSExecution { width: 150px !important }

and add a class like so

$('#v65-onepage-billfirstname').addClass('afterJSExecution');

example fiddle: http://jsfiddle.net/JQtmt/

edited May 31 '12 at 15:47

answered May 31 '12 at 15:18

Fabrizio Calderan

120,726
26
164
177

OP Says: _please note i cant change the .CSS file as its called remotely from some other server_ . On the other hand he can define that rule in a local css file. – Selvakumar Arumugam May 31 '12 at 15:22
no need to change that specific css file, you could insert that rule in page or inside a local css. It would be always better than disseminating css values inside js code, imho – Fabrizio Calderan May 31 '12 at 15:23
Yes true.. I did mention that :P – Selvakumar Arumugam May 31 '12 at 15:24
@F.Calderan instead of DIV used as per my example and seee please – user580950 May 31 '12 at 15:58
You have a reference to that element before you defined into the dom. Call that addClass _after_ that element (or at DOM Ready) – Fabrizio Calderan May 31 '12 at 15:59
@F.Calderan I tried that but its stil not working can you use my code in your jsfiddle pls ? – user580950 May 31 '12 at 16:01

Hidde · Answer 2 · 2012-05-31T15:35:15.957

1

jQuery itsself cannot understand priorities. You can however change the style attribute:

var id = '#v65-onepage-billlastname';
var curStyle = $(id).attr('style');
if (curStyle)
    $(id).attr('style', curStyle + 'width: 150px !important');
else
    $(id).attr('style', 'width: 150px !important');

edited May 31 '12 at 15:35

answered May 31 '12 at 15:21

Hidde

11,493
8
43
68

Well, I think it will not work using the `.css()` method. `.width() `might work, but jQuery doesn't undertand any `!important` additions to `.css()` calls. Conclusion, this is another way of doing it, because inline styles with `!important` have the highest priority over any other styles. – Hidde May 31 '12 at 15:24
If you are going to change the `style` attribute.. you should use `.width` method because it does the same. – Selvakumar Arumugam May 31 '12 at 15:25
Maybe that is a better way, but definately not the ONLY way. – Hidde May 31 '12 at 15:26
Seems to be this is the ONLY alternate way to do other than defining new CSS +1 – Selvakumar Arumugam May 31 '12 at 15:36
Thanks, and I changed it a bit more, in case there is no current inline style ;) – Hidde May 31 '12 at 15:36
@Hidde what i am doing wrong here at dev9.edisbest.com/test.html please use my example – user580950 May 31 '12 at 15:56
I don't see what you are doing wrong. It has a width of 150px in my browser, like it should? – Hidde May 31 '12 at 20:07

Oliver Gray · Answer 3 · 2012-05-31T16:16:50.243

You can achieve this by adding an additional class to the input either in the HTML or though JQuery in order to supply a CSS style that will override the original width by being more specific. e.g.

<style type="text/css">

    /* existing style */
    #namedElement {
        width: 280px !important;
    }

    /* new style */
    #namedElement.co-text.namedElementOverride {
        width: 100px !important;
    }

</style>

Then simply update your HTML with the additional tag (co-text was already present in the original example)

<input type="text" onkeydown="" style="" value="" id="namedElement" maxlength="50" size="25" class="co-text namedElementOverride" />

Or else assign the new class with JQuery;

    $('#namedElement.co-text')
        .addClass('namedElementOverride');

Good point, revision accepted - can't make it too easy though right? ;) — Oliver Gray, May 31 '12 at 15:30

Apply CSS Class ( !important ) to a TextBox using JQuery

3 Answers3