Inline styles mysteriously applied to textarea on front-end

Question

I'm having an issue whereby a textarea element on my page is getting some inline styling applied when rendering on the front-end - but the styling isn't in my HTML, and I've tried overwriting it using !important in my styling.

I've found someone with a similar issue here: similar issue - but no one has been able to resolve that.

So, my HTML for the textarea is as follows:

<textarea class="contact-field focus-hide" id="message" name="message" required autocomplete="off"></textarea>

My CSS is as follows:

.contact-field {
background-color: #FFFFFF;
border: none;
padding: 10px 10px;
font-size: 16px;
color: #000000;
outline: none;
display: block;
margin-bottom: 10px;
width: 100%;
transition: all 300ms ease-in-out;
box-sizing: border-box;

}

.contact-field:focus {
    background-color: rgba(0,0,0,0.5) !important;
    color: #FFFFFF;
}

And yet, when the page renders some inline styling has mysteriously appeared out of nowhere, which breaks the :focus change in my css:

<textarea class="contact-field focus-hide" id="message" name="message" required="" autocomplete="off" data-gramm="true" data-txt_gramm_id="c66481f6-0696-cdf9-ee03-18973388ba4a" data-gramm_id="c66481f6-0696-cdf9-ee03-18973388ba4a" spellcheck="false" data-gramm_editor="true" style="z-index: auto; position: relative; line-height: normal; font-size: 16px; transition: none 0s ease 0s; background: transparent !important;"></textarea>

Oh, and another thing, this isn't happening on my local machine - only when I upload it to my web server. Is it possible there's something on the server causing this issue?!

Hopefully someone is able to resolve this for me? It's so frustrating!

Thanks

What scripts are you using on the web server? I assume it's something on the server that's injecting those styles. — Nathan Champion, Jan 14 '19 at 20:15
@Arkellys Ah, hadn't actually checked that! I'm having the issue in Chrome, but seems fine in Firefox and Safari?! — Loop Drop Media, Jan 14 '19 at 20:33
@NathanChampion It's not actually my web server, so I'm not sure I'll be able to check that...? — Loop Drop Media, Jan 14 '19 at 20:34
Just discovered it was in fact the Grammarly extension running in Chrome! Not sure why it was only affecting it when online and not my local version though?! — Loop Drop Media, Jan 14 '19 at 20:39
I am glad you found the problem ! Maybe Grammarly is only activated on "actual" websites ? The worse thing about this is that maybe users using this extension will have the same problem. :/ — Arkellys, Jan 14 '19 at 20:43
I think the solution is [here](https://stackoverflow.com/q/37444906/9718056) ? Should we mark this post as a duplicate ? — Arkellys, Jan 14 '19 at 20:54
@Arkellys Ah fantastic, yes that has sorted it for me! Thanks! — Loop Drop Media, Jan 14 '19 at 23:09
Possible duplicate of [How to stop extensions/add ons like grammarly on contenteditable editors](https://stackoverflow.com/questions/37444906/how-to-stop-extensions-add-ons-like-grammarly-on-contenteditable-editors) — Nathan Champion, Jan 15 '19 at 00:48

Inline styles mysteriously applied to textarea on front-end

0 Answers0