您好,欢迎来到爱站旅游。
搜索
您的当前位置:首页使用checkbox实现纯CSS下拉框_html/css

使用checkbox实现纯CSS下拉框_html/css

来源:爱站旅游

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

Click to Expand

  • Link One
  • Link Two
  • Link Three
  • Link Four
  • 实现过程:

    HTML结构

       
  • Link One
  • Link Two
  • Link Three
  • Link Four
  • #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为选中状态时,下拉菜单就显示,否则隐藏。

    demo:

    demo.zip

    Copyright © 2019- azee.cn 版权所有 赣ICP备2024042794号-5

    违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

    本站由北京市万商天勤律师事务所王兴未律师提供法律服务