更改 Chosen multi-select 项目删除按钮
Changing the Chosen multi-select item removal button
有没有办法调整 Chosen jQuery 插件提供的用于删除多 select 中的 selected 项目的按钮?很明显,我可以覆盖 CSS 中的图像 URL,但这似乎有点麻烦。
理想情况下,我希望能够在提供给插件的选项中提供不同的 class,类似于 $('select').chosen({ multiRemoveClass: 'fa fa-remove' })
。但是,这似乎不是受支持的功能。那么解决这个问题的最佳方法是什么?
下面是一个示例片段,它隐藏了我要调整的按钮:
$('select').chosen()
select {
width: 100%;
}
/* Removes the Chosen removal button image */
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
background: none !important;
}
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" />
<select multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
您可以继续您已经开始的路径并使用 pseudo-elements 来适应您的字体:
$('select').chosen()
select {
width: 100%;
}
/* Removes the Chosen removal button image */
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
background: none !important;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:after {
font-family: "Font Awesome 5 Brands", sans-serif;
content: "\f099";
color: red;
font-size: 12px;
}
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<select multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
有没有办法调整 Chosen jQuery 插件提供的用于删除多 select 中的 selected 项目的按钮?很明显,我可以覆盖 CSS 中的图像 URL,但这似乎有点麻烦。
理想情况下,我希望能够在提供给插件的选项中提供不同的 class,类似于 $('select').chosen({ multiRemoveClass: 'fa fa-remove' })
。但是,这似乎不是受支持的功能。那么解决这个问题的最佳方法是什么?
下面是一个示例片段,它隐藏了我要调整的按钮:
$('select').chosen()
select {
width: 100%;
}
/* Removes the Chosen removal button image */
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
background: none !important;
}
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" />
<select multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
您可以继续您已经开始的路径并使用 pseudo-elements 来适应您的字体:
$('select').chosen()
select {
width: 100%;
}
/* Removes the Chosen removal button image */
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
background: none !important;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:after {
font-family: "Font Awesome 5 Brands", sans-serif;
content: "\f099";
color: red;
font-size: 12px;
}
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<select multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>