Today, I needed to disable checkbox using CSS only without any HTML attribute.
Here is the code:
HTML:
1 2 3 4 5 | <input type="checkbox" checked="checked" /><!-- using opacity --><input type="checkbox" checked="checked" /><!-- using layer --><input type="checkbox" checked="checked" /> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | input[type="checkbox"]:nth-child(2) { opacity: 0.5; pointer-events: none;}input[type="checkbox"]:nth-child(3) { position: relative; pointer-events: none;}input[type="checkbox"]:nth-child(3):before { content: ""; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5);} |
Here is a working example at CodePen.