使用checkbox实现纯CSS下拉框

Posted 2020-06-28

今天给大家讲一个css例子，主要内容是使用checkbox实现纯css下拉框，要用到了html元素的checkbox 和CSS3选择器（http://www.maiziedu.com/course/web/228-2627/），并没有用到javascript。例子如下：

 

实现过程：

 HTML结构

<div class="dropdown">

    <input type="checkbox" id="checkbox_toggle">

    <label for="checkbox_toggle">Click to Expand</label>

    <ul>

        <li><a href="#">Link One</a></li>

        <li><a href="#">Link Two</a></li>

        <li><a href="#">Link Three</a></li>

        <li><a href="#">Link Four</a></li>

</ul></div>

#div作为一个容器包裹所有标签

#input[type=checked]标签用于标识checked 和unchecked 属性，元素是隐藏的

#label标签用于触发下拉菜单

#ul为菜单列表

 添加Checkbox Hack

我们只需要checkbox元素的伪类选择器:checked就可以检测到元素的checked状态，通过label标签来触发checkbox的unchecked 和checked 状态。首先把checkbox隐藏

input[type=checkbox]{

    display: none;

}

同时，我们也把ul默认隐藏掉，当触发菜单时才会显示。

ul{

    display: none;

}

 

通过结合:checked选择器 和相邻同胞选择器~ 来控制对应的菜单的显示状态。

input[type=checkbox]:checked ~ ul {

    display: block

}

 

当checkbox为选中状态时，下拉菜单就显示，否则隐藏。