IE's F12 Developer Tools - add new CSS?

30
votes

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

4
internet-explorerinternet-explorer-8ie-developer-tools
Could you change the accepted answer to the top answer? - stefan.s
@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. - andyb

4 Answers

38
votes

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

12
votes

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.

1
votes

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.

1
votes

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