[英]css for select box arrow
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>
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>
You are missing a position:relative
to its parent div. 您缺少一个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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.