選擇選項箭頭，響應位置

Question

我需要選擇選項的箭頭風格看起來像這樣

我發現很多相關的答案，但所有與位置絕對 - 這限制了自然浮現的位置，所以如果我需要輸入響應 - 每當分辨率改變時它都會失去它的位置。

所以我想也許創建2個div - 一個包含選擇選項，它的左側 - div包含自定義箭頭。但我不能定位箭頭DIV足夠接近選擇選項，因此這將是點擊.....

這裏是我到目前爲止已經完成了...

<div class="modify_search"> 
     <div class="search_wrapper"> 
     <div class="search_header"> 
      <form class="form-inline"> 
      <p>QUAND</p> 
      <div class="search_left"> 
       <div class="input-group"> 
       <div class="input-group-addon"><span>DU</span></div> 
       <input type="text" class="form-control search_input" /> 
       <div class="input-group-addon input_icon"></div> 
       </div> 
      </div> 
      <div class="search_right"> 
       <div class="input-group"> 
       <div class="input-group-addon"><span>AU</span></div> 
       <input type="text" class="form-control search_input" /> 
       <div class="input-group-addon input_icon"></div> 
       </div> 
      </div> 
      </form> 
      <div class="search_profil"> 

      <div class="search_profil_cont"> 

       <p>PROFIL</p> 
       <div class="foo1"> 
       <select class="search_select"> 
        <option>Salarie</option> 
        <option>Salarie</option> 
        <option>Salarie</option> 
       </select> 
       </div> 
       <div class="foo2">^</div> 
      </div> 
      </div> 
     </div> 
     <div class="search_footer_btn"><span class="search_btn">foo </span></div> 
     </div> 
    </div> 

而且的CSS：

.search_input { 
     border: none; 
     outline: none; 
     font-size: 1.4vw; 
     box-shadow: none; 
     padding: 0px; 
     font-family: 'Roboto Light', sans-serif; 
     text-align: center; 
    } 

    .search_input:focus { 
     box-shadow: none; 
    } 

    .modify_search { 
     overflow: hidden; 
     position: absolute; 
     background-color: white; 
     width: 250px; 
     height: 250px; 
     left: 50%; 
     bottom: 5%; 
     border-radius: 10px; 
     -webkit-box-shadow: 0px 0px 28px -5px rgba(0, 0, 0, 0.75); 
     -moz-box-shadow: 0px 0px 28px -5px rgba(0, 0, 0, 0.75); 
     box-shadow: 0px 0px 28px -5px rgba(0, 0, 0, 0.75); 
    } 

    .search_left, 
    .search_right { 
     border-bottom: 1px solid grey; 
    } 

    .search_left { 
     width: 48%; 
     float: left; 
    } 

    .search_right { 
     width: 48%; 
     float: right; 
    } 

    /* .search_profil { 
     float: left; 
    } */ 
    .search_icon{ 
     float:left; 
     width:50%; 

    } 

    .search_profil select { 
     -webkit-appearance: none; 
     -moz-appearance: none; 
     appearance: none; 
    } 

    .search_header { 
     position: relative; 
     height: 80%; 
     padding: 15px 15px 0px 15px; 
    } 

    .search_footer_btn { 
     height: 20%; 
     position: absolute; 
     bottom: 0px; 
     left: 0px; 
     width: 100%; 
     text-align: center; 
     background-color: #49c8c1; 
    } 

    .input-group-addon { 
     background-color: white; 
     border: none; 
    } 

    .input-group-addon > i:before { 
     content: "\f073"; 
     font-family: FontAwesome; 
     font-style: normal; 
    } 

    .input_icon:after { 
     content: "\f073"; 
     font-family: FontAwesome; 
     font-style: normal; 
    } 

    .input-group-addon span { 
     font-family: 'Roboto Black', sans-serif; 
     font-size: 10px; 
     vertical-align: sub; 
    } 

    .search_select{ 
     border:none; 
     outline:none; 
     width:100%; 
    } 

    .search_select:foucs{ 
     border:none; 
     outline:none; 
    } 
    .foo1{ 
     float:left; 
     width:50%; 
    } 

    .foo2{ 
     float:left; 
     width:50%; 
    } 

而且Fiddle

Answer 1

您可以設置圖片爲背景的選擇，並添加填充，使文本不會溢出你的箭頭。

造型一選擇一個自定義下拉箭頭的

例子：

select { 
    padding: 39px; 
    border-radius: 0px; 
    color: #222; 
    background-color: #9DC418; 
    border: none; 
    display: inline-block; 
    cursor: pointer; 
    width: 100%; 
    font-weight: bold; 
    background-image: url(../assets/images/ui/pilned.svg); 
    background-repeat: no-repeat; 
    background-position: center right 30px; 
    background-size: cover; 
    background-size: 20px; 
    outline: none; 
    text-transform: none; 
    border-radius: 0; 
    box-shadow: none; 
    appearance: none; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
} 

您還應該添加的這段代碼，支持IE瀏覽器，並告訴他們刪除其原來的下拉箭頭：

select::-ms-expand { 
    display: none; 
}