欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

原生组件-select框

程序员文章站 2022-03-27 18:08:01
...

1.html页面

        <select class="leaveSelect">
          <option value="1" label="1测试"></option>
          <option value="2" label="2测试"></option>
          <option value="3" label="3测试"></option>
        </select>

2.css样式

  .leaveSelect {
    width: 200px;
    padding: 4px 0px 4px 20px;
    margin-right: 8px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    outline-color: transparent; //去掉点击后的黄色框框
    /*去掉默认的下拉三角*/
    appearance: none;
    /* IE */
    -webkit-appearance: none;
    /* google */
    -moz-appearance: none;
    /* firefox */
    background: url("../../assets/leave/arrow.png") no-repeat scroll right
      center transparent;
    border: 1px solid #d0d0d0;
    font-size: 24px;
  }