css custom drop-down menu, expand and hide through pseudo-class control_html/css_WEB-ITnose

The company recently made a component library. Some radio boxes, check boxes, and drop-down menus all need to be beautiful and customized.

I made one in my spare time (browser requirements Higher) component of the drop-down menu.

/*********Implement function start **************/

Use css pseudo-class: focus to implement the basic functions of the drop-down menu

select:

Click menu (animation transition ) to expand, click (animation transition) again to collapse;

and make sure to click on a blank space on the page and select option (animation transition) to collapse the menu.

option:

Limit the height of 5 pieces of content. If it exceeds the height, the scroll bar will be used. Otherwise, the height will be adaptive;

/***********Implement functionend*******************/

If you are interested, you can take a look at the demo link

demo address

http://dabblet.com/gist/f6fa50639957db5a7759

The core code uses: 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;    }

Be prepared to be sprayed with a communication mentality^_^.