下拉列表箭头的 CSS 问题

Question

如下图所示，下拉框的箭头有问题。如何将箭头带回到实际的下拉框中？

当前状态

    form label {
        display: block;
        font-size: 15px;
        font-size: 0.9375rem;
        line-height: 1.73333em;
        cursor: pointer;
        margin-bottom: 2px;
    }
    
    .form-select select, .form-type-select select {
        width: 100%;
        background: transparent;
        border: 1px solid #ACACAC;
        padding: 2px 10px;
        height: 30px;
        outline: none;
        border-radius: 0;
        text-transform: uppercase;
        -moz-appearance: none;
        -webkit-appearance: none;
    }
    
    .form-select, .form-type-select {
        position: relative;
    }

    <div class="form-item form-type-select form-item-cid">
          <label for="edit-cid">Category <span class="form-required" title="This field is required.">*</span></label>
         <select id="edit-cid" name="cid" class="form-select required"><option value="2">Event Questions</option><option value="1" selected="selected">General Information</option><option value="5">History Museum</option><option value="3">Research Question</option><option value="4">Website Feedback</option></select>
        </div>

Answer 1

将 Arrow 和 Dropdown 放在一个具有相对定位的容器中，并赋予 Arrow 绝对定位。像这样：https://jsfiddle.net/mfmh1coy/

HTML：

  <div class="dropdown-container">
    <span class="dropdown-arrow">V</span>
    <select id="edit-cid" name="cid" class="form-select required"><option value="2">Event Questions</option><option value="1" selected="selected">General Information</option><option value="5">History Museum</option><option value="3">Research Question</option><option value="4">Website Feedback</option></select>
  </div>

CSS：

.dropdown-container {
  position: relative;
}

.dropdown-arrow {
  height:100%;
  width: 25px;
  background-color: red;
  color: white;
  position: absolute;
  right: 0;
}