override inline css !important

Question

how can I override the style "color: red" either with javascript or CSS? I want to make it "2px" instead of "1px" border.

<div style="border: 1px solid #ccccc !important"> 
       Lorem... 
</div>

I can NOT add a class, id to the "div". that is not a solution here. I have to override the code above somehow.

Solution Used jquery already loaded on the site. Ran: $( document ).ready(function() { $('table[style*=border]').css('border-width',"4px"); }); https://jsfiddle.net/78oxmgLj/10/

Answer 1

With your actual code you cannot do it with CSS (As @TJ Crowder commented, there is no CSS rule that can beat inline with !important ) but here is a JS solution:

 document.querySelector('.box').style.borderWidth="2px"; document.querySelector('.box').style.borderColor="red"; //or //document.querySelector('.box').style.border="2px solid red";

 <div class="box" style="border: 1px solid #cccccc!important"> Lorem... </div>

UPDATE

If for some reason you cannot add class you can use attribute selector based on style (but I don't advice to use this as a generic solution)

 document.querySelector('div[style*=border]').style.borderWidth="2px"; document.querySelector('div[style*=border]').style.borderColor="red";

 <div style="border: 1px solid #cccccc!important"> Lorem... </div>

Answer 2

While the accepted answer is true, there are ways depending on your usecase that you can do here with CSS alone. Even if you cannot override the specific value, you can use a different property to change the original state.

 b { filter: hue-rotate(250deg); /*blue*/ } i { display: inline-block; transform: scale(0.4); }

 <b style="color: red !important">Stack</b> <i style="font-size: 50px !important">Stack</i>

In your example, if you need to change 1px important inline border to 2px, you can use outline or box-shadow without blurring:

 div:first-child { box-shadow: 0 0 0 3px #ccc; }

 <div style="border: 1px solid #cccccc !important"> Lorem... </div> <br> <div style="border: 4px solid #cccccc !important"> Lorem... </div>