css用於選擇框箭頭

Question

我想在選擇框中添加下拉箭頭。我已嘗試但在選擇框后面顯示箭頭。我想將箭頭放在選擇框內

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

Answer 1

這里最好的解決方案是將背景圖像放到選擇中，如下所示：

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

Answer 2

您缺少一個position:relative對於其父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>