将自定义箭头放在自定义下拉列表的顶部

Question

我已创建以下自定义下拉列表：

但正如您所看到的，箭头并未置于实际下拉列表的顶部。我一直在尝试搞乱很多属性，但似乎我无法在下拉列表顶部获得箭头，同时箭头位置也是绝对的 - 并且没有将其设置为绝对值看起来真的很混乱和不精确。

＆＃13;

＆＃13;

.custom-dropdown select {
  background-color: #f6c02a;
  color: #fff;
  font-size: inherit;
  border: 0;
  margin: 0;
  width: 385px;
  height: 30px;
  text-indent: 5px;
  text-overflow: '';
  -webkit-appearance: button;
  /* hide default arrow in chrome OSX */
}

.custom-dropdown::before,
.custom-dropdown::after {
  content: "";
  pointer-events: none;
  position: absolute;
  padding-left: 170px;
}

.custom-dropdown::after {
  /*  Custom dropdown arrow */
  content: "\25BC";
}

＆＃13;

<div id="search1">
  <input type="text" id="searchplayer1" placeholder="Player1...">
  <br>
  <span class="custom-dropdown">
            <select>    
                <option value="SelectRegion">Select Region...</option>
                <option value="Europe">Europe</option>
                <option value="Korea">Korea</option>
                <option value="Japan">Japan</option>
                <option value="North America">North America</option>
                <option value="Oceania">Oceania</option>
                <option value="Kakao">Kakao</option>
                <option value="South East Asia">South East Asia</option>
                <option value="South and Central America">South and Central America</option>
                <option value="Asia">Asia</option>
            </select>
        </span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

检查一下，使用:: before之前的元素

.custom-dropdown::before {
  content: "\25BC";
}

.custom-dropdown select {
  background-color: #f6c02a;
  color: #fff;
  font-size: inherit;
  border: 0;
  margin: 0;
  width: 385px;
  height: 30px;
  text-indent: 5px;
  text-overflow: '';
  -webkit-appearance: button;
  /* hide default arrow in chrome OSX */
}

.custom-dropdown::before,
.custom-dropdown::after {
  content: "";
  pointer-events: none;
  position: absolute;
      padding-left: 370px;
    padding-top: 5px;
}

.custom-dropdown::before {
  /*  Custom dropdown arrow */
  content: "\25BC";
}

<div id="search1">
  <input type="text" id="searchplayer1" placeholder="Player1...">
  <br>
  <span class="custom-dropdown">
            <select>    
                <option value="SelectRegion">Select Region...</option>
                <option value="Europe">Europe</option>
                <option value="Korea">Korea</option>
                <option value="Japan">Japan</option>
                <option value="North America">North America</option>
                <option value="Oceania">Oceania</option>
                <option value="Kakao">Kakao</option>
                <option value="South East Asia">South East Asia</option>
                <option value="South and Central America">South and Central America</option>
                <option value="Asia">Asia</option>
            </select>
        </span>
</div>

Answer 2

尝试使用左侧和顶部绝对位置

    
  
 .custom-dropdown select {
      background-color: #f6c02a;
      color: #fff;
      font-size: inherit;
      border: 0;
      margin: 0;
      width: 385px;
      height: 30px;
      text-indent: 5px;
      text-overflow: '';
      -webkit-appearance: button;
      /* hide default arrow in chrome OSX */
    }

    
 .custom-dropdown::before,
 .custom-dropdown::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 370px;
  top: 35px;
}

    .custom-dropdown::after {
      /*  Custom dropdown arrow */
      content: "\25BC";
    }

    <div id="search1">
      <input type="text" id="searchplayer1" placeholder="Player1...">
      <br>
      <span class="custom-dropdown">
                <select>    
                    <option value="SelectRegion">Select Region...</option>
                    <option value="Europe">Europe</option>
                    <option value="Korea">Korea</option>
                    <option value="Japan">Japan</option>
                    <option value="North America">North America</option>
                    <option value="Oceania">Oceania</option>
                    <option value="Kakao">Kakao</option>
                    <option value="South East Asia">South East Asia</option>
                    <option value="South and Central America">South and Central America</option>
                    <option value="Asia">Asia</option>
                </select>
            </span>
    </div>