Uniform CSS - add icon on the right side of an select box

Question

i'm using the current uniformjs library and bootstrap on a form. with the library the select boxes get a nice design:

<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>

Currently my problem is that the bullet_red will be rendered in a new line, but i want to have the bullet on the same line.

After a few tries i need some help. I tried:

• display-inline on the image
• changing the style of div.uni-selector
• changing the style of div.uni-selector span

Is there anybody with a solution to the problem?

Answer 1

Got the solution from another source:

i need this style:

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

and then i need to add the class plus the original class to the uniform initialization

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

Answer 2

You can wrap the select and the img element in a div and float both elements to the left like in this example:

<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/