Css custom drop-down menu, hide by pseudo class control, css

Css custom drop-down menu, hide by pseudo class control, css

Recently, the company has to develop a component library. Some Single-dataset, check boxes, and drop-down menus must be customized in a beautiful way,

A drop-down menu component (with high browser requirements) is created in the idle time.

**************/

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

Select:

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

Make sure that you click the blank area of the page and choose option (animation transition) to collapse the menu.

Option:

Limit the height of five items. The scroll bar is exceeded, and the adaptive height is vice versa;

************/

If you are interested, check the demo connection.

 

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;    }

 

 

 

 Make preparations for being sprayed with the communication mentality ^_^.