30

Im viewing an element with IE's F12 developer tools. I can see the styles being applied to the element so I can change or disable them, but how can I add a completely new style?

Thanks

Improve this question
2
  • 1
    Could you change the accepted answer to the top answer? Commented Oct 31, 2013 at 10:37
  • @stefan.s IE8 does not have the same options as the accepted answer and at the time IE8 was the browser being asked about. It is might be better to edit the title of this question to specify IE8, then raise (and answer) a question specifically for IE9/10/11. In principle though I agree the accepted answer is probably now out of date and I've clarified my answer is for older browsers. Commented Oct 27, 2017 at 12:38

4 Answers 4

Reset to default
38

In IE9 you can select the CSS tab then right click to add a new style rule.

enter image description here

In IE11 you'll need to select the DOM Explorer tab, then the Styles tab on the right. Then you can right-click to add a new style rule.

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Indeed, the perfect answer.
Same way, except it's been moved to the styles tab on the right side by default. Similar to where it's at in Chrome.
@Zack Just added instructions for IE11.
In IE, whenever I try adding something on inline style in Styles tab, it is immediately cross-out with a line. Sometimes it works if I right click on the HTML and select 'Add Attribute' ...
12

For IE8/IE9 you could add the style attribute to the element and add any CSS properties inline. Simply right click on the element and select Add Attribute. As commented, this only adds style to one element.

For IE10/11 see the other answer.

Improve this answer

1 Comment

That works unless I want to apply styles to a class or id, rather than 1 element. Thanks
1

If IE is not finding the element you hover with the cursor it may be because part of the HTML code is being loaded with Ajax or another similar technique after the page have already being generated. If that is the case, you will have to close the inspector, reload the page, make all the steps necessary to show the element in wich you are interested and only then open the inspector again. Now it should find your element when you hover it so you can inspect it for whatever you need.

Improve this answer

Comments

1

Click on the Attributes Tab in the Developer Tools. You can add css there.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.