I'm writing a simple plugin that shows on pages/posts a form with customized style for input fields, checkboxes, buttons, etc... via a shortcode. When user writes the shortcode in the page, it generates some CSS, some HTML and some JavaScript but result is not rendered as I want I think because of active theme CSS. In fact if I wrote the same combination of CSS, HTML and JavaScript in a simple HTML file rendering is perfect and if, in WordPress, I change theme, rendering changes...
How can I prevent the active theme from interfering with my plugin by rendering the controls as if they were inserted in a simple HTML page?
EDIT, added code:
<div class="chatbox-container">
<button class="chatbox-open">
<i class="fa fa-comment fa-2x" aria-hidden="true"></i>
</button>
<button class="chatbox-close">
<i class="fa fa-close fa-2x" aria-hidden="true"></i>
</button>
<section class="chatbox-popup">
<header class="chatbox-popup__header">
<aside style="flex:3">
<i class="fa fa-user-circle fa-4x chatbox-popup__avatar" aria-hidden="true"></i>
</aside>
<aside style="flex:8">
<h1>Tal Dei Tal</h1> Seller (Online)
</aside>
<aside style="flex:1">
<button class="chatbox-maximize"><i class="fa fa-window-maximize" aria-hidden="true"></i></button>
</aside>
</header>
<main class="chatbox-popup__main">
Some sample text, here GDPR terms...
</main>
<footer class="chatbox-popup__footer">
<aside style="flex:1;color:#888;text-align:center;">
<i class="fa fa-camera" aria-hidden="true"></i>
</aside>
<aside style="flex:10">
<textarea type="text" placeholder="Type your message here..." autofocus></textarea>
</aside>
<aside style="flex:1;color:#888;text-align:center;">
<i class="fa fa-paper-plane" aria-hidden="true"></i>
</aside>
</footer>
</section>
<section class="chatbox-panel">
<header class="chatbox-panel__header">
<aside style="flex:3">
<i class="fa fa-user-circle fa-3x chatbox-popup__avatar" aria-hidden="true"></i>
</aside>
<aside style="flex:6">
<h1>Tal Dei Tali</h1> Seller (Online)
</aside>
<aside style="flex:3;text-align:right;">
<button class="chatbox-minimize"><i class="fa fa-window-restore" aria-hidden="true"></i></button>
<button class="chatbox-panel-close"><i class="fa fa-close" aria-hidden="true"></i></button>
</aside>
</header>
<main class="chatbox-panel__main" style="flex:1">
Some sample text, here GDPR terms...
</main>
<footer class="chatbox-panel__footer">
<aside style="flex:1;color:#888;text-align:center;">
<i class="fa fa-camera" aria-hidden="true"></i>
</aside>
<aside style="flex:10">
<textarea type="text" placeholder="Type your message here..." autofocus></textarea>
</aside>
<aside style="flex:1;color:#888;text-align:center;">
<i class="fa fa-paper-plane" aria-hidden="true"></i>
</aside>
</footer>
</section>
</div>
<style type="text/css">
.chatbox-container {
all: initial;
font-family: "Lato", sans-serif;
}
.chatbox-container h1 {
margin: 0;
font-size: 16px;
line-height: 1;
}
.chatbox-container button {
color: inherit;
background-color: transparent;
border: 0;
outline: 0 !important;
cursor: pointer;
}
.chatbox-container button.chatbox-open {
position: fixed;
bottom: 0;
right: 0;
width: 52px;
height: 52px;
color: #fff;
background-color: #0360a5;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.15);
border: 0;
border-radius: 50%;
cursor: pointer;
margin: 16px;
}
.chatbox-container button.chatbox-close {
position: fixed;
bottom: 0;
right: 0;
width: 52px;
height: 52px;
color: #fff;
background-color: #0360a5;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.15);
border: 0;
border-radius: 50%;
cursor: pointer;
display: none;
margin: 16px calc(2 * 16px + 52px) 16px 16px;
}
.chatbox-container textarea {
box-sizing: border-box;
width: 100%;
margin: 0;
height: calc(16px + 16px / 2);
padding: 0 calc(16px / 2);
font-family: inherit;
font-size: 16px;
line-height: calc(16px + 16px / 2);
color: #888;
background-color: none;
border: 0;
outline: 0 !important;
resize: none;
overflow: hidden;
}
.chatbox-container textarea::-webkit-input-placeholder {
color: #888;
}
.chatbox-container textarea::-moz-placeholder {
color: #888;
}
.chatbox-container textarea:-ms-input-placeholder {
color: #888;
}
.chatbox-container textarea::-ms-input-placeholder {
color: #888;
}
.chatbox-container textarea::placeholder {
color: #888;
}
.chatbox-container .chatbox-popup {
display: -webkit-box;
display: flex;
position: fixed;
box-shadow: 5px 5px 25px 0 rgba(46, 61, 73, 0.2);
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
display: none;
bottom: calc(2 * 16px + 52px);
right: 16px;
width: 377px;
height: auto;
background-color: #fff;
border-radius: 16px;
}
.chatbox-container .chatbox-popup .chatbox-popup__header {
box-sizing: border-box;
display: -webkit-box;
display: flex;
width: 100%;
padding: 16px;
color: #fff;
background-color: #0360a5;
-webkit-box-align: center;
align-items: center;
justify-content: space-around;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
}
.chatbox-container .chatbox-popup .chatbox-popup__header .chatbox-popup__avatar {
margin-top: -32px;
background-color: #0360a5;
border: 5px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
}
.chat-container .chatbox-popup .chatbox-popup__main {
box-sizing: border-box;
width: 100%;
padding: calc(2 * 16px) 16px;
line-height: calc(16px + 16px / 2);
color: #888;
text-align: center;
}
.chatbox-container .chatbox-popup .chatbox-popup__footer {
box-sizing: border-box;
display: -webkit-box;
display: flex;
width: 100%;
padding: 16px;
border-top: 1px solid #ddd;
-webkit-box-align: center;
align-items: center;
justify-content: space-around;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
}
.chatbox-container .chatbox-panel {
display: -webkit-box;
display: flex;
position: fixed;
box-shadow: 5px 5px 25px 0 rgba(46, 61, 73, 0.2);
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
display: none;
top: 0;
right: 0;
bottom: 0;
width: 377px;
background-color: #fff;
}
.chatbox-container .chatbox-panel .chatbox-panel__header {
box-sizing: border-box;
display: -webkit-box;
display: flex;
width: 100%;
padding: 16px;
color: #fff;
background-color: #0360a5;
-webkit-box-align: center;
align-items: center;
justify-content: space-around;
-webkit-box-flex: 0;
flex: 0 0 auto;
}
.chatbox-container .chatbox-panel .chatbox-panel__main {
box-sizing: border-box;
width: 100%;
padding: calc(2 * 16px) 16px;
line-height: calc(16px + 16px / 2);
color: #888;
text-align: center;
-webkit-box-flex: 1;
flex: 1 1 auto;
}
.chatbox-container .chatbox-panel .chatbox-panel__footer {
box-sizing: border-box;
display: -webkit-box;
display: flex;
width: 100%;
padding: 16px;
border-top: 1px solid #ddd;
-webkit-box-align: center;
align-items: center;
justify-content: space-around;
-webkit-box-flex: 0;
flex: 0 0 auto;
}
</style>