Small example of using CSS to modify the checkbox effect of HTML to share

Using a checkbox to control subsequent elements

The checkbox control can toggle its state depending on the mouse's click, and can be used in CSS to set the style for a checkbox in the selected state, using the checked pseudo class. In conjunction with the "+" or "~" selector in CSS, you can control the element after it from the checkbox operation. Even with label labels, you can achieve more results.

Run

　CSS Code copy content to clipboard

1. <! DOCTYPE html>
2. <style>
3. [type=checkbox]+* {display:none;}
4. [type=checkbox]:checked+* {display:inline-block;}
5. </style>
6. <input type="checkbox" /><input/>

In this example, the text box is hidden by default, and the text box is displayed only when the checkbox is checked. This allows you to achieve no JavaScript switching effect.

Someone might think it's too much of an eyesore to put a checkbox on the page. In fact, even if the checkbox itself is hidden, CSS: Checked's judgment is still in force. So we can hide this checkbox and let the label label set the response area for it.

Run

　　CSS Code copy content to clipboard

2. <! DOCTYPE html>
4. <style>
6. Body {font:14px/1.5 Microsoft James Black;}
8. [Type=checkbox] {display:none;}
10. [Type=checkbox]~input {display:none;}
12. [Type=checkbox]:checked~input {display:inline-block;}
14. [Type=checkbox]~span {cursor:pointer; Margin-right:10px;}
16. [Type=checkbox]~span:before {content:' dot I show text box ';}
18. [Type=checkbox]~span:hover {color:#C30;}
20. [Type=checkbox]:checked~span:before {content:' dot I hide text box ';}
22. </style>
24. <label><input type="checkbox" /><span></span><input/></label>

However, this approach is somewhat limited, because the current CSS does not support: has,:p arent, and so on, so the supported operations are limited to the label, and the default behavior of the label will always affect its internal first control, the above code even if the text box pop-up, It is also possible to trigger the default action of the label when clicking on the text box, causing the text box to be hidden.

All in all, here's just the way to do it, and it's up to everyone to study how to use it.