0

I have a chrome extention that inserts HTML code into a webpage, but its design gets affected by the host webpage's css.

js

var button = document.createElement("button ");
button.id = "btn_btn_btn";
button.innerText = "pres button";

document.getElementsByTagName("html")[0].prepend(button);

css

#btn_btn_btn{
   background-color: rgb(229, 97, 97) !important;
   border: none !important;
   height: 100px !important;
   color: white !important;
   font-size: 15px !important;
   text-align: center !important;
}

is there a way of having it only be affected by my css file without adding important to every attribute an element can have.

Digital Pain
  • 37
  • 1
  • 7
  • 1
    Unless you can use a more specific selector than the webpage uses, then you'll have to override their styles with `!important`. – Phoenix Mar 03 '21 at 00:55

2 Answers2

0

There's a similar thread from 5 years ago and it has the answer

Use a new CSS file to override current website's CSS

Gamer4717
  • 51
  • 7
0

Refer https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity this would help you even in future.. Avoid !important as it may affect any other element (rare case) with the same class in the webpage. Try to make your selector more specific.. like.. #container #parent #button.btn_btn_btn it will override all global styles that are less in precedence.

Karthikeyan
  • 406
  • 3
  • 14