CSS Custom drop-down menu with pseudo-class control to expand hidden

Company recently to do component library, some radio boxes, check boxes, drop-down menus need to be beautiful custom,

Idle time makes a component (a high-demand browser) drop-down menu.

/********* realization Function Start **************/

Using CSS pseudo-class: Focus implements the drop-down menu basic function

Select

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

And make sure to click on the page blank and select option the same (animation transition) to close the menu.

Option

Limit the height of 5 items, the scroll bar is exceeded, and the adaptive height is the opposite;

/*********** realization Function end************/

Interested can look at the demo connection

Demo Address

http://dabblet.com/gist/f6fa50639957db5a7759

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

to be sprayed with the attitude of communication to prepare ^_^.

CSS Custom drop-down menu with pseudo-class control to expand hidden