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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您错过了其父级的position:relative。

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

＆＃13;

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

＆＃13;

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

＆＃13;

css用于选择框箭头

2 个答案: