CSS カスタム ドロップダウン メニュー、疑似クラス control_html/css_WEB-ITnose を通じて展開および非表示にする

会社は現在、コンポーネント ライブラリを構築中です。一部のラジオ ボックス、チェック ボックス、ドロップダウン メニューはすべて美しくカスタマイズする必要があります

暇なときに、ドロップダウン メニュー コンポーネントを作成しました。ブラウザではより高い要件が必要です）。

/*********実装機能開始**************/

CSS 疑似クラスを通じてドロップダウン メニューの基本機能を実装します: focus

select:

メニュー (アニメーション トランジション) をクリックして展開し、再度クリック (アニメーション)トランジション) 折りたたむ

そして、ページ上の空白部分をクリックし、オプション (アニメーショントランジション) を選択してメニューを閉じます。

オプション:

5 つのコンテンツの高さを制限します。それ以外の場合は、高さが適応されます。興味がある方は、デモのリンクをチェックしてください

デモのアドレス

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

コミュニケーション態度がスプレーされることに備えてください^ _^。