zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    PHP Jquery
    PHP TPinfo表的增删改查
    PHP TP验证码
    PHP TP表单验证
    PHP TP增删改
    8月21日 仿163邮箱中遇到的问题及解决(三)
    8月20日 仿163邮箱中遇到的问题及解决(二)
    8月12日 仿163邮箱中遇到的问题及解决(一)
    8月7日 使用Jquery做表格的隔行变色,点击事件
    6月17日 TP表单验证
  • 原文地址:https://www.cnblogs.com/liubingyjui/p/13231329.html
Copyright © 2011-2022 走看看