如何在输入字段中向右移动箭头？

Question

＆＃13;

＆＃13;

.wrapper-dropdown-3 {
  width: 200px;
  margin: 0 auto;
  padding: 10px;
  background: #fff;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
  cursor: pointer;
  font-weight: bold;
  color: #8AA8BD;
}

.wrapper-dropdown-3:after {
  content: "";
  width: 0;
  height: 0;
  margin-top: -3px;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #8aa8bd transparent;
}

＆＃13;

<div id="dd" class="wrapper-dropdown-3" tabindex="1">
  <span>Transport</span>
</div>

＆＃13;

＆＃13;

＆＃13;

在上面的代码中，我想将蓝色箭头插入.wrapper-dropdown-3的中间右侧。截至目前，它位于交通span附近的右上方。我不确定如何将它移到正确的中间位置？有什么建议吗？

Answer 1

您可以对容器使用绝对定位：

.wrapper-dropdown-3 {
    width: 200px;
    margin: 0 auto;
    padding: 10px;

    background: #fff;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
    cursor: pointer;

    font-weight: bold;
    color: #8AA8BD;

    position: relative;
}

.wrapper-dropdown-3:after {
    content: "";
    width: 0;
    height: 0;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #8aa8bd transparent;
    position: absolute;
    right: 5px;
    top: calc(50% + 6px / 2); /* 6px here is border-width value to compensate a fact that arrow is made from border */
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

<div id="dd" class="wrapper-dropdown-3" tabindex="1">
	<span>Transport</span>
</div>

Answer 2

只需使用这样的定位：

＆＃13;

＆＃13;

.wrapper-dropdown-3 {
  width: 200px;
  margin: 0 auto;
  padding: 10px;
  background: #fff;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
  cursor: pointer;
  font-weight: bold;
  color: #8AA8BD;
  /*Code added*/
  position:relative;
  /**/
}

.wrapper-dropdown-3:after {
  /*Code added*/
  position:absolute;
  right:5px;
  top:50%;
  /**/
  content: "";
  width: 0;
  height: 0;
  margin-top: -3px;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #8aa8bd transparent;
}

＆＃13;

<div id="dd" class="wrapper-dropdown-3" tabindex="1">
  <span>Transport</span>
</div>

＆＃13;

＆＃13;

＆＃13;