Issue
I am applying a class "error" to an input tag when a user changes the text in the textbox. This class is used to change the background color of the textbox and keep a record of what has been changed. This works perfectly in other browsers, but when a user selects an option from an autofill box in chrome, the class is still applied, but chrome's user agent style still trumps my style, preventing the correct background color from being applied.
To make matters more confusing, when I inspect the page and look at computed styles, chrome strikes through the style that should be overridden, but still says that it is the style being applied:
I Have Tried
increasing the specificity of my style rule.
overwriting chromes selector (this throws a warning that ":-internal-autofill-selected" is not a valid pseudo-class):
input:-internal-autofill-selected{ background-color: none !important; }Edge and Firefox (works as intended)
Clearing the cache, restarting the browser (although, maybe I missed something?)
one solution I found was to disable autofill for the page, but that will not work because autofill is very helpful for this textbox
Reproducible Code
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
function ChangeColorRed(e) {
e.target.classList.add("error");
}
$(document).ready(function () {
var txtboxes = document.getElementsByTagName('input');
for (var j = 0; j < txtboxes.length; j++) {
txtboxes[j].addEventListener('input', ChangeColorRed);
}
});
</script>
<style>
#txtOrderNumber.error, #txtItem.error{
background-color:#FFCCCB !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
Order Number:
<input type="text" id="txtOrderNumber" class="form-control inputText"/>
Item#:
<input type="text" id="txtItem" class="form-control inputText"/>
<input type="submit" name="btnSelect" value="Select" id="btnSelect" class="btn btn-secondary"/>
</form>
</body>
I suspect the answer to this is either something really simple that I am missing or some strange chrome phantom error. Any insight into what I might be doing wrong would be greatly appreciated.
UPDATE
CBroe supplied a workaround in the comments that is the best solution so far. Updating the script to the code below, makes Chrome stop thinking this field was auto-filled
function ChangeColorRed(e) {
e.target.classList.add("error");
}
function BackgroundColorWorkaround() {
document.querySelector('#txtOrderNumber').value = document.querySelector('#txtOrderNumber').value
document.querySelector('#txtItem').value = document.querySelector('#txtItem').value
}
$(document).ready(function () {
var txtboxes = document.getElementsByTagName('input');
for (var j = 0; j < txtboxes.length; j++) {
txtboxes[j].addEventListener('input', ChangeColorRed);
txtboxes[j].addEventListener('blur', BackgroundColorWorkaround);
}
});