我如何在choose.js选择控件中添加左侧字体 - 真棒图标？

Question

我开始使用选择.js插件定制html 选择控件。它工作得很好......但我需要嵌入到一个字体超棒的图标，左侧定位，并为大约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; 
} 

要更改图标，您必须用FontAwesome站点上的图标的Unicode代码替换content属性中的f007。 举例来说，你可以找到一个星形图标代码在这里http://fortawesome.github.io/Font-Awesome/icon/star/

如果你想获得幻想和模仿引导输入组的风格，你可以做这样的事情：

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 

Answer 2

不幸的是，选上的多选并不能真正模仿的经典选择的下拉箭头，我能得到接近，但有一个怪癖;将项目添加到多框时，箭头将右对齐。最初它会看起来很完美，并且如果你清除了多重区域，它会回到完美的状态，但是由于控制是如何构建的，它就是野兽的本质。

/* Custom drop down arrow for faux dropdowns that Chosen uses in Task View */ 
li.search-field { 
      background: url(/Images/down-arrow-tiny.png) right no-repeat; 
      width: 290px; 
      float: left; 
}