纯css自定义下拉菜单，无js(:focus)控制展开隐藏

最近要做组件库，一些单选框，复选框，下拉菜单都需要美观自定义，

闲余时间做了一个下拉菜单的组件。

勉强 实现了无js（：focus）控制其展开隐藏。

/* ------------------实现功能 start ------------------------- 

 * 通过 css伪类:focus 实现下拉菜单基本功能

 * select:

 * 点击菜单(动画过渡)展开,再次点击(动画过渡)收起;

 * 并保证点击页面空白处和选择option后同样(动画过渡)收起菜单。

 * option:

 * 限制5条内容的高度，超出则滚动条，反之则自适应高度;

 * ------------------实现功能 end ------------------------- /

有兴趣的可以看一下demo连接

 demo测试地址

http://dabblet.com/gist/a1d38f295fe82cb772b9

代码预览

https://gist.github.com/iamyangtao

核心代码用到的是：focus

  div.masker {    position: absolute;    z-index: -1;    width: 0;    height: 0;  }    div[p-type="listview"]>input:focus+div+div.masker {    left: 0;    top: 0;    z-index: 10;    width: 100%;    height: 100%;  }   div.list-cont {    position: absolute;    top: 100%;    left: -1px;    right: -1px;    z-index: -1;    height: 0px;    transition-property: height, z-index;    transition-duration: .3s;    transition-timing-function: ease-in-out;    transform-origin: 0 0;    overflow: hidden;  }    div[p-type="listview"]>input:focus+div.list-cont {    height: 152px;    z-index: 10;  }

 待解决的问题是：

点击一下select展开，再点一下收起时（鼠标不要移开select），出现了无法收起的状况。

除chrome40+的版本意外，别的版本及其他浏览器都存在以上问题

 以交流的心态做好被喷的准备 ^_^。

原标题：纯css自定义下拉菜单，无js(:focus)控制展开隐藏

关键词：JS