更改选择的多选项目删除按钮

Question

有没有办法调整选择的jQuery插件提供的按钮，该按钮用于删除多选中的选定项目？ 很明显，我可以在CSS中覆盖图像URL，但这似乎有点hack。

理想情况下，我希望能够按照$('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> 

Answer 1

您可以在开始的路径上继续，并使用伪元素来容纳字体：

 $('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>