Disable inline css style

Question

When I inspect the html with IE Developer tools, I see that there is one inline style for a button:

I don't want any width property for this input element. How can I disable or overwrite this with empty width?

Answer 1

If you want to override inline styles then you need to add styles in your stylesheet with !important

for e.g.

width: auto !important;

Reference - CSS Specificity

Answer 2

You can disable inline styles for any given element using JavaScript:

1. Locate the button in the HTML document
2. Remove the button's style attribute

var button = document.getElementById('myButton');
button.removeAttribute('style');

Answer 3

Update for 2022+

If anyone else stumbles upon this in the present, you can do much more than remove an inline HTML style tag with JavaScript. You can keep the tag around in case you want to return it later. There are two ways you can do it!

One way: "Disabled" HTML property

I've heard tell that using disabled on the HTML tag will stop your browser from processing it. But I had trouble getting this to work on Firefox. Maybe someone can enlighten me about that!

<style class='style-class' disabled>
  body { color: blue; }
</style>

So you'd just

$('.style-class').prop('disabled', true)

Another way: Changing the tag itself

Your browser will only parse styles within a style tag. So if you change the tag to anything else, you'll still be able to inspect it in the DOM just fine, but it won't treat it as a stylesheet.

(jQuery used for the explanation here)

$(style.selector).replaceWith (function () {
  var attributes = $(this).prop("attributes");
  var $newEl = $('<nostyle>')
  $.each(attributes, function() {
    $newEl.attr(this.name, this.value);
  });  
  return $newEl.html($(this).html())
});

Then when you're ready to return the style, use this:

$(notstyle.selector).replaceWith (function () {
  var attributes = $(this).prop("attributes");
  var $newEl = $('<style>')
  $.each(attributes, function() {
    $newEl.attr(this.name, this.value);
  });  
  return $newEl.html($(this).html())
});