css自定义下拉菜单，通过伪类控制展开隐藏_html/css_WEB-ITnose

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

核心代码用到的是：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;    } 

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

查看更多关于css自定义下拉菜单，通过伪类控制展开隐藏_html/css_WEB-ITnose的详细内容...