• select加下拉箭头


    <div class="flex">
      <
    label>城市</label>
      <div class="dealerbo">
      <
    select><option value="110000">北京市</option></select>
      </
    div>
    </
    div>

     CSS

    .flex {
     width: 30%;
     color: #2D3E4E;
     font-size: 15px;
     border-bottom: 1px solid rgba(45, 62, 78, 0.3);
     margin-right: 5%;
    }
    label {
     text-align: left;
     width: 100%;
     display: inline-block;
     margin-bottom: 5%;
     font-weight: 600;
     font-size: 15px;
    }
    .dealerbo {
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        position: relative;
        width: 99%;
        align-items: center;
        justify-content: space-between;
        background: url(../images/arrow_Down.png) no-repeat 100% center;
        overflow: hidden;
        padding-right: 5%;
        white-space: nowrap;
    }
    select {
        height: 27px;
        font-size: 14px;
        color: #000;
        border: none;
        background-color: transparent;
        padding-bottom: 5px;
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
    }

    <div class="city">
        <div>
            <select>
               <option value="110000">北京市</option>
           </select>
       </div>
       <div>
            <select>
               <option value="110000">北京市</option>
           </select>
        </div>
    </div>
    .flex {
         position: relative;
         display: flex;
         flex-wrap: wrap;
         width: 100%;
         margin-bottom: 0.1rem;
         border-bottom: 1px solid rgba(45, 62, 78, 0.3);
    }
    .flex label {
     text-align: left;
     width: 100%;
     display: inline-block;
     margin-bottom: 2%;
     font-weight: 600;
    }
    .city {
        position: relative;
        display: flex;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        width: 100%;
    }
    .city::before {
        content: '';
        border-right: 1px solid #ddd;
        height: 20px;
        width: 1px;
        position: absolute;
        left: 47%;
        bottom: 9%;
    }
    .city > div {
        position: relative;
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: 10%;
    }
    .popBox .pb .form .flex .city > div::after {
     content: '';
     height: 0.11rem;
     width: 0.22rem;
     position: absolute;
     background: url(../../pc/images/arrow_Down.png) no-repeat 100% center;
     right: 0;
     background-size: 100%;
     bottom: 0.2rem;
    }
    
    
    select {
        height: 27px;
        font-size: 0.28rem;
        color: #000;
        border: none;
        background-color: transparent;
        padding-bottom: 5px;
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
    }
    a, button, input, optgroup, select, textarea {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    button, optgroup, select, textarea {
        -webkit-appearance: none;
        outline: none;
        border-radius: 0;
    }
    select option {
        color: #000;
        font-size: 0.28rem;
    }
  • 相关阅读:
    大家帮忙出几个招聘考试题目吧
    单元测试和设计模式在重构中的应用
    想起去年和女朋友第一次去吃饭的事情
    为什么我们常忘记使用正则表达式
    .NET实用设计模式:观察者模式(Observer)
    一个Outlook宏写的小程序,献给象我一样粗心大意的人
    单元测试应该测什么,不应该测什么?
    .NET实用设计模式:工厂模式(Factory)
    2021 系统架构设计师备考分享
    系统架构设计师论文企业集成
  • 原文地址:https://www.cnblogs.com/liubingyjui/p/13231329.html
Copyright © 2020-2023  润新知