如何更改Select2箭头图标？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何更改Select2箭头图标？相关的知识，希望对你有一定的参考价值。
我将select2用于自定义选择框。但是我不能更改箭头图标。 innerhtml不起作用。我该怎么办？
$(".position-select").select2({
dropdownParent: $(".choose-position")
});
// $('b[role="presentation"]').remove();
// this not working!
$('.choose-position select2-arrow').append(
'<svg style="fill:red" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg>'
);* {
font-family: "Segoe UI", Roboto, sans-serif;
}
.choose-position .select2-container {
width: 100% !important;
}
.choose-position .select2-container--default .select2-selection--single {
width: 100% !important;
display: flex;
align-items: center;
padding: 0 30px;
height: 50px;
line-height: 50px;
font-weight: 500;
font-size: 16px;
background-color: #fafafa;
border: 1px solid #eeeeee;
border-radius: 25px;
transition: 0.1s;
}
.choose-position .select2-search {
display: none;
}
.choose-position .select2-results__option {
display: flex;
align-items: center;
}
.choose-position .select2-results__option .img-flag {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
margin-right: 10px;
}
.choose-position .select2-container--default.select2-container--focus .select2-selection--single {
border: 1px solid #c9c9c9 !important;
outline: 0;
}
.choose-position span.select2-selection.select2-selection--single {
outline: none;
}
.choose-position .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 35px;
top: 50%;
transform: translateY(-50%);
right: 10px;
width: 35px;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 20px rgba(35, 49, 45, 0.14);
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css">
<div class="select-box choose-position">
<select class="position-select">
<option value="english">English Teacher</option>
<option value="german">Deutschlehrer</option>
<option value="french">Professeur de Français</option>
<option value="chinese">中文老師</option>
</select>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>答案
覆盖b标签并使用自己的背景图像网址
$(".position-select").select2({
dropdownParent: $(".choose-position")
});* {
font-family: "Segoe UI", Roboto, sans-serif;
}
.choose-position .select2-container {
width: 100% !important;
}
.choose-position .select2-container--default .select2-selection--single {
width: 100% !important;
display: flex;
align-items: center;
padding: 0 30px;
height: 50px;
line-height: 50px;
font-weight: 500;
font-size: 16px;
background-color: #fafafa;
border: 1px solid #eeeeee;
border-radius: 25px;
transition: 0.1s;
}
.choose-position .select2-search {
display: none;
}
.choose-position .select2-results__option {
display: flex;
align-items: center;
}
.choose-position .select2-results__option .img-flag {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
margin-right: 10px;
}
.choose-position .select2-container--default.select2-container--focus .select2-selection--single {
border: 1px solid #c9c9c9 !important;
outline: 0;
}
.choose-position span.select2-selection.select2-selection--single {
outline: none;
}
.choose-position .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 35px;
top: 50%;
transform: translateY(-50%);
right: 10px;
width: 35px;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 20px rgba(35, 49, 45, 0.14);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
background-image: url(https://cdn4.iconfinder.com/data/icons/user-interface-174/32/UIF-76-512.png);
background-color: transparent;
background-size: contain;
border: none !important;
height: 20px !important;
width: 20px !important;
margin: auto !important;
top: auto !important;
left: auto !important;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css">
<div class="select-box choose-position">
<select class="position-select">
<option value="english">English Teacher</option>
<option value="german">Deutschlehrer</option>
<option value="french">Professeur de Français</option>
<option value="chinese">中文老師</option>
</select>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>另一答案
您能尝试这个吗？>
$('.choose-position .select2-selection__arrow').append(
'<svg style="fill:red" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg>'
);
以上是关于如何更改Select2箭头图标？的主要内容，如果未能解决你的问题，请参考以下文章