正如您在下面的图片中看到的那样,我遇到了下拉框箭头的问题。如何将箭头带回实际下拉框中?
当前状态
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>
&#13;
答案 0 :(得分:2)
将箭头和下拉列表放在具有相对定位的容器中,并给出箭头绝对定位。像这样: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:
#