css for select box arrow

Question

I want to add dropdown arrow in select box.I have tried but arrow displays behind the select box.I want to place the arrow 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>

Possible duplicate of [How to style a – Abhishek Pandey Apr 17 '17 at 07:26 — Abhishek Pandey, Apr 17 '17 at 07:26

score 2 · Accepted Answer · answered Apr 17 '17 at 06:03

The best solution here is to put a background-image to the select like this:

.custom-search-selector{
   background: url(http://cdn4.iconfinder.com/data/icons/ionicons/512/icon-
   arrow-up-b-128.png) no-repeat right;
    background-size: 16%; 
}

.form-item-custom-search-types select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
/* added */
.custom-search-selector{
       background: url(http://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png) no-repeat right;
        background-size: 16%; 
    }

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

here you have just to add a good size image, use svg image preferably and delete the background-size: 16%; that i have added — kebir, Apr 17 '17 at 06:07

Shahil M · Answer 2 · 2017-04-17T05:37:45.427

You are missing a position:relative to its parent div.

.form-item{ 
  position: relative;
  display: inline-block;
}
.form-item-custom-search-types::before {
      right: 5px;
      top: calc(50% - 3px);
   }

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

/* added */
.form-item {
  position: relative;
  display:inline-block;
}
.form-item-custom-search-types::before {
  right: 5px;
  top: calc(50% - 3px);
}

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

this solution is not good, because when you click on the arrow the select will not open, and if you put a full width to .form-item the arrow will move to right — kebir, Apr 17 '17 at 05:50

css for select box arrow

2 Answers2