JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" value="Some text" id="input"/>
<br/>
<button onclick="button()">enable/disable</button>
CSS
input.ie-disabled {
background-color:#FFFBF0;
color: #28B51D !important;
}
input[disabled] {
background-color:#FFFBF0;
color: #28B51D;
}
JavaScript
function button() {
var input = document.getElementById('input');
input.disabled = !(input.disabled);
}
function checkDisabled() {
var inputs = document.getElementsByTagName('INPUT');
for(var i=0, l=inputs.length; i<l; i++) {
if(inputs[i].disabled) {
if(inputs[i].className.indexOf('ie-disabled')==-1)
inputs[i].className = inputs[i].className+' ie-disabled';
} else {
inputs[i].className = inputs[i].className.replace('ie-disabled', '');
}
}
}
setInterval(checkDisabled, 1000);