自定义下拉框的样式

来源：互联网发布：10年总决赛第七场数据编辑：程序博客网时间：2024/06/06 00:56

要做出来的样子是这样的：

右边那个悬停置灰的block该怎么搞呀想了想还是自己模拟个下拉框吧（原有的样式不好改）

HTML代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>select box</title>    <link rel="stylesheet" href="dist/pac.css">    <script src="dist/jquery-2.1.4.min.js"></script></head><body><div class="select">    <div class="select-wrap">        <input class="select-simulate" type="text">        <div class="drop-down">            <div class="triangle"></div>        </div>    </div>    <div class="option-wrap" hidden="hidden">        <div class="option-simulate">            <dl>                <dd><p>BS-B20系列</p></dd>                <dd><p>BS-B21系列</p></dd>                <dd><p>BS-B22系列</p></dd>                <dd><p>BS-B23系列</p></dd>                <dd><p>BS-B24系列</p></dd>            </dl>        </div>    </div></div></body></html>

CSS代码：

.select{    margin: 10px;}.select-wrap,.dis-select-wrap{    width: 200px;    height: 24px;    border: 1px solid #d7d7d7;}.select-simulate,.dis-select-simulate{    float: left;    width: 178px;    height: 24px;    border: transparent;}.drop-down,.dis-drop-down{    float: left;    width: 20px;    height: 20px;    margin: 2px 1px;}.triangle,.dis-triangle{    border:3px solid;    width: 0;    height: 0;    border-bottom-color:transparent ;    border-left-color: transparent;    border-right-color: transparent;    margin:8.5px auto;}.option-wrap{    width: 200px;    min-height:100px;    border: 1px solid #C5C5C5;    border-top-style: hidden;    z-index: -1;}dd{    vertical-align: middle;    height:24px;    display:block;}dd:hover{    margin: 0 1px;    background-color: #f6dfa2;}dd p{    font-size: small;    position: relative;    top: 5px;    left: 8px;}.dis-select-wrap{    background-color: #d7d7d7;}.dis-select-simulate{    background-color: #d7d7d7;    color: #d2d2d2;}

jQuery 代码：

<script>    $(document).ready(function(){        $(".select-wrap,.option-wrap").mouseenter(function(){            $(".select-wrap").css('border','1px solid #d4b259');            $(".drop-down").css('background','#f3f3f3');        });        $(".select-wrap,.option-wrap").mouseleave(function(){            $(".select-wrap").css('border','1px solid #d7d7d7');            $(".drop-down").css('background','#ffffff');        });        $(".select-wrap").click(function(){            $(".option-wrap").toggle();        });        $("dd").click(function() {            $('.select-simulate').val($(this).text());        });    });</script>

一开始居然不知道自己模拟下拉框，浪费了不必要的时间。以后写代码前还是应该仔细想想。

0 0