css自定义下拉菜单，通过伪类控制展开隐藏

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

闲余时间做了一个（对浏览器要求较高的）下拉菜单的组件。

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

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

select:

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

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

option:

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

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

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

demo地址

http://dabblet.com/gist/f6fa50639957db5a7759

核心代码用到的是：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%;
        background-color: transparent;
    }

 div.list-cont {
        position: absolute;
        top: 100%;
        left: -1px;
        right: -1px;
        z-index: -1;
        height: 0px;
        -webkit-transition-property: height, z-index;
        -webkit-transition-duration: .3s;
        -webkit-transition-timing-function: ease-in-out;
        transition-property: height, z-index;
        transition-duration: .3s;
        transition-timing-function: ease-in-out;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    div[p-type="listview"]>input:focus+div.list-cont {
        height: 152px;
        z-index: 10;
    }

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