统一CSS - 在选择框的右侧添加图标

Question

我在表单上使用当前的uniformjs库和bootstrap。使用库，选择框得到了很好的设计：

<div class="control-group">
<label class="control-label">Some Label:</label><div class="controls">
    <select class="uni_style">
        <option>Lorem ipsum dolor sit amet amet, lorem ipsum</option>
        <option>Lorem ipsum dolor sit amet</option>
        <option>Lorem ipsum dolor sit amet</option>
        <option>Lorem ipsum dolor sit amet</option>
        <option>Lorem ipsum dolor sit amet</option>
    </select>
    <img src="../img/bullet_red.png"/>
</div>

目前我的问题是bullet_red将在一个新行中呈现，但我想让子弹在同一行。

经过几次尝试后我需要一些帮助。我试过了：

• 在图像上显示内联
• 更改div.uni-selector的风格
• 更改div.uni-selector span的样式

有没有人解决这个问题？

Answer 1

您可以将select和img元素包装在div中，并将两个元素浮动到左侧 就像在这个例子中一样：

<div class="control-group">
<label class="control-label">Some Label:</label><div class="controls">
    <div>
        <select style='float:left;' class="uni_style">
            <option>Lorem ipsum dolor sit amet amet, lorem ipsum</option>
            <option>Lorem ipsum dolor sit amet</option>
            <option>Lorem ipsum dolor sit amet</option>
            <option>Lorem ipsum dolor sit amet</option>
            <option>Lorem ipsum dolor sit amet</option>
        </select>
        <img style='float:left;'src="../img/bullet_red.png"/>
    </div>
</div>

http://jsfiddle.net/mpHug/2/

Answer 2

从其他来源获得解决方案：

我需要这种风格：

div.reqselect {display:inline-block; vertical-align:middle; margin-bottom: 0;}

然后我需要将类加上原始类添加到统一初始化

$(".uni_style").uniform({
selectClass: 'uni-selector reqselect',});