<p>
<input value="input">
<button>toggle</button>
</p>
<p>
<input type="checkbox" />
</p>
input,
button {
font-size: 14px;
border-radius: 5px;
background: #fff;
border: solid 1px #999;
padding: 5px;
}
input:disabled {
background: #999;
}
button:hover {
background: #ccc;
}
button:active {
background: #ddd;
}
document.querySelector('button').onclick = e=>{
const input = document.querySelector('input');
input.disabled = !input.disabled;
};
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.