html - 选择选项箭头，响应位置

Question

我需要将选择选项的箭头样式设置为如下所示

我找到了许多相关的答案，但都带有绝对位置 - 这限制了位置自然 float ，所以如果我需要输入响应 - 每次分辨率改变时它都会失去它的位置。

所以我想也许创建 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;
}