Is it possible to place a dropdown arrow inside a select box? I have tried, but the arrow always displays behind the select box. How can I modify the CSS code to position the arrow properly inside the select box?
.form-item-custom-search-types::before {
content: '';
display: block;
border: 9px solid transparent;
border-top-color: #4d1c73;
position: absolute;
/* right: -17px; */
top: calc(50% - 2px);
}
.form-item-custom-search-types select {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}<div class="form-item form-type-select form-item-custom-search-types">
<label class="element-invisible" for="edit-custom-search-types">Search for </label>
<select class="custom-search-selector custom-search-types form-select" id="edit-custom-search-types" name="custom_search_types"> <option value="c-all" selected="selected">All</option>
<option value="c-announcement">Announcements</option>
<option value="c-article">Articles</option><option value="c-blog">Blogs</option>
<option value="c-forum">Forums</option>
<option value="c-gallery">Galleries</option>
<option value="c-Documents">Documents</option>
</select>
</div>