Select-or-Die demonstrates 11 ways to beautify the drop-down box selection

online preview

download link

Online instance
 

<div class="main">
            <div class="mianc">
                <h1>Default</h1>

                <!-- Demo start -->
                <div class="select">
                    <select class="myselect">
                        <option value="Interaction Design">Interaction Design</option>
                        <option value="Visual Design">Visual Design</option>
                        <optgroup label="Development">
                            <option value="Front-end development">Front-end development</option>
                            <option value="Backend Development">Backend Development</option>
                        </optgroup>
                        <option value="User Research">User Research</option>
                        <option value="Product Manager">Product Manager</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>