Select-or-Die演示11种美化下拉框select方法

时间：2021-01-03 20:35:35

Select-or-Die演示11种美化下拉框select方法

在线预览

下载地址

在线实例

<div class="main">

            <div class="mianc">

                <h1>默认</h1>

                <!-- Demo start -->

                <div class="select">

                    <select class="myselect">

                        <option value="交互设计">交互设计</option>

                        <option value="视觉设计">视觉设计</option>

                        <optgroup label="开发">

                            <option value="前端开发">前端开发</option>

                            <option value="后端开发">后端开发</option>

                        </optgroup>

                        <option value="用户研究">用户研究</option>

                        <option value="产品经理">产品经理</option>

                    </select>

                </div>

                <!-- Demo end -->

            </div>

        </div>

        <style>

            * { margin: 0; padding: 0;}

            html, body { height: 100%; overflow: hidden;}

            body { font-family: Consolas,arial,"宋体";}

            .menu { position: absolute; left: 0; top: 0; width: 200px; height: 100%; background-color: #ccc; font-family: Consolas,arial,"宋体";}

            .menuc { height: 100%; overflow-x: hidden; overflow-y: auto;}

            .menu span { display: block; height: 100px;}

            .menu a { display: block; height: 40px; margin: 0 0 1px 2px; padding-left: 10px; line-height: 40px; font-size: 14px; color: #333; text-decoration: none;}

            .menu a:hover { background-color: #eee;}

            .menu .cur { color: #000; background-color: #fff !important;}

            .main { height: 100%; margin-left: 200px;}

            .mianc { position: relative; height: 100%; overflow-x: hidden; overflow-y: auto;}

            .main h1 { width: 900px; margin: 40px auto; font: 32px "Microsoft Yahei";}

            .explain, .sucaihuo-explain { margin-top: 20px; font-size: 14px; text-align: center; color: #f50;}

        </style>

　　

相关文章