jquery - 如何在 chosen.js 选择控件中添加左侧 Font Awesome 图标？

Question

我开始使用 chosen.js 插件来自定义 html select 控件。它工作得很好......但我需要在其中嵌入一个字体很棒的图标，左侧定位，以及大约 30 像素的文本填充(不重要)。

有谁知道我该怎么做？我一无所知。

提前致谢。

Answer 1

假设您的标记是这样的:

<select id="my-select" class="chosen-with-icon">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

以下 CSS 代码将在输入的左侧插入 FontAwesome“用户”图标:

select.chosen-with-icon + .chosen-container.chosen-container-single .chosen-single {
    padding-left    : 35px;
}

select.chosen-with-icon + .chosen-container.chosen-container-single .chosen-single:before {
    content : "\f007";
    display : block;
    font-family : FontAwesome;
    left    : 0;
    position    : absolute;
    text-align  : center;
    width   : 30px;
}

要更改图标，您必须将 content 属性中的 f007 替换为您可以在 FontAwesome 网站上找到的图标的 unicode 代码。 例如，您可以在此处找到星形图标的代码 http://fortawesome.github.io/Font-Awesome/icon/star/

如果你想要花哨并模仿 Bootstrap 输入组样式，你可以这样做:

select.chosen-with-icon + .chosen-container.chosen-container-single .chosen-single {
    padding-left    : 35px;
}

select.chosen-with-icon + .chosen-container.chosen-container-single .chosen-single:before {
    background-color    : #f0f0f0;
    border-right    : 1px solid #ccc;
    content : "\f007";
    display : block;
    font-family : FontAwesome;
    height  : 100%;
    left    : 0;
    line-height : 25px;
    position    : absolute;
    text-align  : center;
    top : 0;
    width   : 30px;
}  

多选的CSS大致相同，只是替换

select.chosen-with-icon + .chosen-container.chosen-container-single .chosen-single

由

select.chosen-with-icon + .chosen-container-multi .chosen-choices

和

select.chosen-icon + .chosen-container.chosen-container-single .chosen-single:before

通过

select.chosen-icon + .chosen-container-multi .chosen-choices:before