Question

我需要将select选项的箭头设置为这样

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

所以我想的可能是创建2个div - 一个包含select选项并且它包含左边 - 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;
}

选择选项箭头，响应位置

1 个答案: