bootstrap-select in input-group problem

[M1chae1]

I want to create an input group that the dropdown list appends on the left hand side of the text input as below:

There is the code I use (jsfiddle link: http://jsfiddle.net/micwallo/2UM8x/57/)
Library: jQuery 2.1.1, bootstrap 3.1.1, bootstrap-select 1.5.4

    <div class="form-horizontal">
        <div class="input-group">
            <select name="CurrencyISOCode" id="CurrencyISOCode" class="selectpicker">
            <option value="USD">USD</option>
            <option value="HKD">HKD</option>
            </select>
            <input type="text" value="10,000.00" name="Amount" id="Amount" class="form-control text-right text-box single-line">
        </div>
    </div>

The result of the above code displayed in three browser as below:

(From top to bottom: Chrome, IE, Firefox)

The width of the button is just equal to caret in Firefox and too long in IE. I have tried to use data-style to set the width but not success. Finally, I found that setting auto width will fix the problem

.input-group .bootstrap-select {
    width: auto !important;  /* Shrink width in IE */
}

.input-group .bootstrap-select > .btn {
    width: auto; /* Expand width in Firefox */
}

The remaining problems is that the border space among the dropdown and input text box.

After investigating it with Firebug, I found that the problems is caused by the SELECT tag in the input-group.

bootstrap-select will set the SELECT tag style to display:none and generate another btn-group after that to simulate the dropdown list. If the SELECT tag is not the first child element in the input-group. It will be perfect.

So my question is that does it possible to provide a way to choose where the SELECT tag placed or btn-group placed or insert btn-group before target SELECT tag or another tricky way to create the input-group in the first attached image?

[M1chae1]

Finally. I use the below CSS to fix it

/* simulate .input-group-btn:first-child > .btn in bootstrap.js */
select:first-child + .bootstrap-select > .btn {
    margin-right: -1px;
}

/* simulate .input-group .input-group-btn:first-child > .btn in bootstrap.js */
.input-group select:first-child + .bootstrap-select > .btn {        
    border-bottom-right-radius: 0;
    border-top-right-radius:0;
}

.input-group > select + .bootstrap-select > .btn {
    /* Fix the problem that the dropdown content doesn't show in IE and Firefox */
    width: auto;
}

.input-group > .bootstrap-select {
    /* Fix the problem that the dropdown will not resize to fit the dropdown content in IE */
    /* Actually, it overwrites .bootstrap-select { width: 220px; } */
    width: 1%;
}

see the link for sample: http://jsfiddle.net/micwallo/2UM8x/63/

[araslanov-e]

@M1chae1 thanks!