HTML - readonly vs. disabled inputs

by Zacc206

HTML

<label>
    <input type="checkbox" />
    <span>I'm a vanilla checkbox (unchecked)</span>
</label>

<label>
    <input type="checkbox" checked />
    <span>I'm a vanilla checkbox (checked)</span>
</label>

<hr>

<label class="is-readonly">
    <input type="checkbox" readonly />
    <span>I am readonly (unchecked)</span>
</label>

<label class="is-readonly">
    <input type="checkbox" checked readonly />
    <span>I am readonly (checked)</span>
</label>

<hr>

<label class="is-disabled">
    <input type="checkbox" disabled />
    <span>I am disabled (unchecked)</span>
</label>

<label class="is-disabled">
    <input type="checkbox" checked disabled />
    <span>I am disabled (checked)</span>
</label>

CSS

* { font-family: monospace; }
label { display: block; }
.is-readonly span { color: brown; }
.is-disabled span { color: darkgray; }