jquery+css自定义美化select下拉框

前言

有时html的自有属性并不能满足设计设计和需求方的审美，因此我们前端不得不去为了实现设计上的各种按钮，绞尽脑汁，想尽各种办法去实现，今天就来说说自定义select吧。

实现原理

利用ul列表，li就是option选项

html

<div class="item1 item">
  <div class="cont">
    <div class="cont1-box">
      <div class="cont1-form">
        <div class="cont1-ul">
          <div class="cont1-div clearfix mr89">
            <div class="fl">
              您的年龄
            </div>
            <div class="fr">
              <div class="select-div" id="select1">
                <div id="age">请选择</div>
                <!-- 下拉箭头 -->
                <img
                  width="11"
                  height="7"
                  src="../../dzhy01/4.png" /*
                  alt=""
                />
              </div>
              <div id="ageOpt" style="display: none">
                <ul class="select-ul">
                  <li data-opt="请选择">请选择</li>
                  <li data-opt="不满1">不满1岁</li>
                  <li data-opt="1">1岁</li>
                  <li data-opt="2">2岁</li>
                  <li data-opt="3">3岁</li>
                  <li data-opt="4">4岁</li>
                  <li data-opt="5">5岁</li>
                  <li data-opt="6">6岁</li>
                  <li data-opt="7">7岁</li>
                  <li data-opt="8">8岁</li>
                  <li data-opt="9">9岁</li>
                  <li data-opt="10">10岁</li>
                  <li data-opt="11">11岁</li>
                  <li data-opt="12">12岁</li>
                  <li data-opt="13">13岁</li>
                  <li data-opt="14">14岁</li>
                  <li data-opt="15">15岁</li>
                  <li data-opt="16">16岁</li>
                  <li data-opt="17">17岁</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="submit">
          立即提交
        </div>
      </div>
    </div>
  </div>
</div>

css

.item1 {
        width: 1190px;
    margin: 0 auto;
  }

  .cont1-form {
    width: 385px;
    height: 190px;
    margin: 0 auto;
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  .cont1-div {
    font-size: 16px;
    color: #333;
    width: 378px;
    height: 50px;
    line-height: 50px;
  }

  .cont1-div .fl {
    line-height: 50px;
    margin-right: 34px;
  }

  .cont1-div .fr {
    width: 280px;
    height: 50px;
    line-height: 50px;
  }

  .select-div div {
    padding-left: 20px;
    font-size: 14px;
    color: #999;
  }

  .select-div img {
    margin-top: -26px;
    float: right;
    margin-right: 20px;
  }

  .select-ul {
    width: 280px;
    background-color: #fff;
    color: #333;
    position: relative;
    z-index: 10000;
    border: 1px solid #ccc;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }

  #ageOpt .select-ul {
    height: 350px;
    overflow: hidden;
    overflow-y: scroll;
  }

  .cont1-div .select-div {
    width: 280px;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 2px;
    box-sizing: border-box;
    cursor: pointer;
  }

  .select-ul li {
    height: 30px;
    line-height: 30px;
    padding-left: 20px;
    cursor: pointer;
    margin-bottom: 0;
    font-size: 14px;
    list-style: none;
  }

  ul,
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .submit {
    width: 280px;
    height: 40px;
    line-height: 40px;
    background: #f97c48;
    box-shadow: 0 10px 12px 0 rgba(255, 161, 49, 0.66);
    border-radius: 51px;
    text-align: center;
    color: #fff;
    margin: 30px auto;
  }

jquery部分

$(document).ready(function() {
    var age = $("#age");
    var ageOpt = $("#ageOpt");
    /* 下拉框点击事件 */
    $("#select1").on("click", function() {
      ageOpt.toggle();
    });
    ageOpt.on("click", "li", function() {
      // 获取option的值
      var ageValue = $(this).attr("data-opt");//读取当前点击的选项的值
      if (ageValue != "请选择") {
        age.text(ageValue + "岁");
        $("#age").css("color", "#333");//改点字体颜色
      } else {
        age.text(ageValue);//更改框里面的值
        $("#age").css("color", "#999");
      }
      ageOpt.hide();//隐藏下拉框
    });
    clickEvent("select1", "ageOpt");

    /* 点击下拉框以外的部分，下拉框隐藏 */
    function clickEvent(id1, id2) {
      var $secOpt = $("#" + id2);
      $(document).bind("click", function(e) {
        var e = e || window.event; //浏览器兼容性
        var elem = e.target || e.srcElement;
        while (elem) {
          //循环判断至跟节点，防止点击的是div子元素
          if (elem.id && elem.id == id1) {
            return;
          }
          elem = elem.parentNode;
        }
        $secOpt.css("display", "none"); //点击的不是div或其子元素
      });
    }
    var lock = true;
    /* 提交事件 */
    $(".submit").on("click", function() {
      var ageText = age.text();//获取下拉框的内容
      if (!lock) {
        return;
      }
      if (ageText === "请选择") {
        alert("请选择年龄");
        return;
      }
    });
  });