0

I'm creating a chat widget and I want to overwrite a bunch of CSS. For example if this is the website theme's CSS:

textarea {
    color: red;
    margin: 10px;
}

and if I style my widget like:

textarea {
    padding: 5px;
}

then only my widget's CSS should work. However, it adds both CSSs to textarea by default - how can I prevent the website's CSS from being added?

The SE I loved is dead
  • 1,517
  • 4
  • 23
  • 27
ashish zarekar
  • 131
  • 10
  • 3
    simple: put your chat into an iframe, which can have its own completely independent css, because it's literally a completely separate document that happens to be displayed within another one. – Marc B Oct 11 '16 at 20:36
  • You could reset all elements within your chat widget with rules like .chat-widget * {margin:0; padding: 0; color: black;} then create styles for each element e.g. textarea { padding: 5px; } . In my opinion an iframe might not be the best solution. Iframes can be problematic to size correctly responsively and interaction between iframe'd and non iframe'd parts of the page can be difficult to achieve. – Davey Oct 11 '16 at 20:44

2 Answers2

2

As Marc B stated, you can put your chat in an iframe, in which case you can have its own completely separate stylesheet.

If you must use it inline, then you can use all css property to unset what has been set elsewhere:

Widget CSS:

textarea {
    all: unset;
    padding: 5px;
}

Further, as pointed out in comments elsewhere, the best way is to create different classes for text area and use them where necessary, for example:

textarea.main {
    color: red;
    margin: 10px;
}

and if I style my widget like:

textarea.chat {
    padding: 5px;
}

And then use

<textarea class="main">

or

<textarea class="chat">

depending on what you need.

Aleks G
  • 56,435
  • 29
  • 168
  • 265
-1

Well I guess it is really easy to write !important to all your css rules. Just replace ";" with "!important" if that's an easy way for you OR if you really want to change then you can use iframe really

Jayesh Amin
  • 314
  • 2
  • 12