JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<input type="text" value="One" disabled>
<input type="text" value="Two" disabled>

CSS

input[disabled] {
    color: red;
}

input:disabled {
    color: blue;
}

JavaScript

console.log('[disabled] matches ' + document.querySelectorAll('input[disabled]').length);
console.log(':disabled matches ' + document.querySelectorAll('input:disabled').length);

// The following statement removes the disabled attribute from the first input
document.querySelector('input:first-child').disabled = false;

console.log('[disabled] matches ' + document.querySelectorAll('input[disabled]').length);
console.log(':disabled matches ' + document.querySelectorAll('input:disabled').length);