Form control appearance

by int32_t

HTML

<body>
<input type=search value="query"> Search<br>
<input type=number> Number<br>
<input type=date> Date<br>

<input type=button value="Press me"> Button <input type=button value="Press me" disabled> disabled<br>

<input type=checkbox>
<input type=checkbox id=cb2 checked>
<input type=checkbox id=cb3> Checkbox
<input type=checkbox disabled>
<input type=checkbox id=cb5 disabled>
<input type=checkbox checked disabled> disabled<br>

<input type=radio> <input type=radio checked> Radio <input type=radio disabled><input type=radio checked disabled> disabled<br>
    
<input type=range> Range <input type=range disabled> disabled<br>
<br>

<select><option>Choice1</option></select> Select-one <select disabled><option>Choice1</option></select> disabled<br>
<select multiple><option selected>Choice1<option>Choice2<option>Choice3<option>Choice4<option>Choice5</select> Select-multiple <select multiple disabled><option selected>Choice1<option>Choice2<option>Choice3<option>Choice4<option>Choice5</select> disabled<br>

    <progress value=50 min=0 max=100></progress> Progress<br>
<progress></progress> Indeterminate progress<br>

CSS

body {
    background: #cfc;
}

JavaScript

document.getElementById('cb2').indeterminate = true;
document.getElementById('cb5').indeterminate = true;