自定义select下拉列表样式

1、新建html文档。

2、书写hmtl代码。

<center>

<div class="example_1">

  <label for="demo-select_1">Example 1:</label>

  <select name="" id="demo-select_1">

    <optgroup label="项目一">

    <option>item 1</option>

    <option >Item 2</option>

    <option >Item 3</option>

    </optgroup>

    <optgroup label="项目二">

    <option>Item</option>

    <option>Item</option>

    </optgroup>

  </select>

  <button id="button_1">Set disable</button>

</div>

</center>

3、书写css代码。

.example_1 select, .example_2 select { width: 200px; }

.example_1 label, .example_2 label { cursor: pointer; }

.b-custom-select { position: relative; display: inline-block; height: 23px; background: #fff; border-width: 1px; border-style: solid; border-top-color: #c3c3c3; border-bottom-color: #838383; border-left-color: #a2a2a2; border-right-color: #a2a2a2; -webkit-box-shadow: inset 0 1px 3px 1px #f2f2f4; box-shadow: inset 0 1px 3px 1px #f2f2f4; font-size: 13px; vertical-align: middle; text-align: left; }

.b-custom-select_disabled { color: #bcbcbc; background: #f9f9f9; }

.b-custom-select_focus { }

.b-custom-select_expanded { z-index: 199; height: 24px; border-bottom: none; border-radius: 3px 3px 0 0; }

.lte7 .b-custom-select { display: inline; zoom: 1; }

.b-custom-select__title { cursor: pointer; overflow: hidden; }

.b-custom-select__title__text { margin: 5px 30px 3px 10px; font-size: 12px; white-space: nowrap; overflow: hidden; }

.b-custom-select__title__icon { position: absolute; top: 0px; right: 0px; display: block; width: 22px; height: 23px; border-left: 1px solid #d8d8d8;border-radius: 0 3px 3px 0; background: #fff; }

.b-custom-select__title__icon:after { content: ""; position: absolute; top: 10px; right: 7px; border-top: 5px solid #666; border-left: 5px solid transparent; border-right: 5px solid transparent; }

.b-custom-select_disabled .b-custom-select__title__icon { background: #f9f9f9; }

.b-custom-select__title__input { height: 20px; padding: 2px 9px; border: none; background: none; outline: 0;font-size: 12px; }

.b-custom-select__dropdown { background: #fff; border: 1px solid #cccccc; border-width: 1px; border-style: solid; border-top-color: #c3c3c3; border-bottom-color: #838383; border-left-color: #a2a2a2; border-right-color: #a2a2a2; -moz-border-radius: 0 0 3px 3px; -webkit--moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; overflow: hidden; }

.b-custom-select__list { padding: 5px 5px; }

.b-custom-select__group { padding: 4px; white-space: nowrap; font-size: 12px; font-weight: bold; }

4、书写并添加js代码。

<script src="jquery-1.8.3.min.js"></script>

<script src="js/jquery.custom-select.js"></script>

5、代码整体结构。

6、查看效果。