CSS-Problem mit Dropdown-Liste Pfeil

Question

Wie Sie mit dem Bild unten sehen können, habe ich ein Problem mit dem Pfeil der Dropdown-Box. Wie bringe ich den Pfeil zurück in die tatsächliche Dropdown-Box?

Aktueller Stand

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

den Pfeil-Setzen und das Dropdown in einem Behälter mit einer relativen Positionierung, und geben Sie dem Pfeil absolute Positionierung. Wie so: 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; 
}