当前位置：Gxlcms > html代码 > 使用checkbox实现纯CSS下拉框_html/css_WEB-ITnose

使用checkbox实现纯CSS下拉框_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：23人阅读

在这个例子中，我们会看到一个纯CSS制作的下拉框。主要是要用到了HTML元素的checkbox 和CSS3选择器，并没有用到JavaScript。例子如下：

Click to Expand

Link One

Link Two

Link Three

Link Four

实现过程：

HTML结构

        Click to Expand            Link One
        Link Two
        Link Three
        Link Four

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

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

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

#ul为菜单列表

我们只需要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为选中状态时，下拉菜单就显示，否则隐藏。

demo:

demo.zip