下拉列表箭头的CSS问题

Question

正如您在下面的图片中看到的那样，我遇到了下拉框箭头的问题。如何将箭头带回实际下拉框中？

当前状态

＆＃13;

＆＃13;

    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;
    }

＆＃13;

    <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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将箭头和下拉列表放在具有相对定位的容器中，并给出箭头绝对定位。像这样：https://jsfiddle.net/mfmh1coy/

HTML：

.dropdown-container {
  position: relative;
}

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

CSS：

#