CODEWITHSUNDEEP
htmlcssformsdropdown
Matthew
Matthew

Reputation: 1655

CSS Issue with Dropdown List Arrow

As you can see with the picture below, I am having an issue with the arrow of the dropdown box. How do I bring the arrow back to within the actual dropdown box?

Current state

1

    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>

Upvotes: 0

Views: 369

Answers (1)

William B
William B

Reputation: 1419

Put the Arrow and the Dropdown in a container with relative positioning, and give the Arrow absolute positioning. Like 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;
}

Upvotes: 2

Related Questions