Bootstrap has-feedback icon not rendering properly when used with dropdownlist

Question

I'm having a problem with bootstrap feedback. form-control-feedback when used with dropdownlist it doesn't align properly. Like I want it to show in the right corner after dropdownlist like it does in IE 11 (below screencast). It's kinda working in IE11 but not in all other browsers (Firefox,Chrome,Safari). I did little bit of googling and didn't find any sound workaround/solution and not sure whether its a bug or the way they intended.

Created a fiddle here http://jsfiddle.net/12qcwbbw/.

It seems this css rule .has-feedback .form-control{padding-right: 42.5px;} works only in IE11.

Here are screen-casts;

This is what it is rendering on IE 11 and that's I want in other browsers.

Firefox

Google Chrome

Safari

Here's my html;

<div class="form-horizontal middle" >    
<div class="col-xs-12 col-sm-12">
    <div class="form-group">
        <label class="col-xs-12 col-sm-3 control-label">Full Name</label>
        <div class="col-xs-12 col-sm-9 has-feedback" >
            <input type="text" class="form-control text-capitalize" name="FullName" id="txtFullName"
                   placeholder="Full Name" />
            <span class="glyphicon glyphicon-remove text-danger form-control-feedback">
            </span>
        </div>
    </div>    
    <div class="form-group ">
        <label class="col-xs-12 col-sm-3 control-label">Gender</label>
        <div class="col-xs-12 col-sm-9 has-feedback">
            <select class="form-control">
                <option>Male</option>
                <option>Female</option>
                <option>Other</option>
            </select>
            <i class="glyphicon glyphicon-remove text-danger form-control-feedback"></i>
        </div>
    </div>
</div>

Any workaround is appreciated!

Answer 1

There is not a cross browser solution for this since every browser renders the <select> element in a different way (and via CSS we have very limited control over it), but there is one alternative that could suit you.

I use CSS trick to make <select> elements be visually similar to all browsers. Its logic is really simple, it places an additional <div> that wraps the <select> that has an arrow image as background that mimics the arrows that a <select> has.

See the snippet below:

.select-style {
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  overflow: hidden;
  background: #fff url('data:image/gif;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==') no-repeat calc(100% - 10px) 50%;
}

.select-style select {
  padding: 5px 8px;
  width: 100%;
  border: none;
  box-shadow: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: rgba(0, 0, 0, 0.6);
}

<div class="select-style">
  <select class="form-control">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

Using the above trick I made an adjustment for your scenario, which is a <select> element inside a .has-feedback element.

Change the background property for the .select-style` rule to change the position of the arrow icon.

.form-control + .form-control-feedback {
  right: 12px;
}

.select-style {
    padding: 0;
    margin: 0;
    border: 0 solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff url('data:image/gif;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==') no-repeat calc(100% - 30px) 50%;
}

    .select-style select {
        padding: 5px 8px;
        width: 100%;
        box-shadow: none;
        background-color: transparent;
        background-image: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        color: rgba(0, 0, 0, 0.6);
    }

.input-group > .select-style {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
    <div class="form-group has-feedback has-error">
        <label for="myselect">A label</label>
        <div class="select-style">
        <select id="myselect" class="form-control">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select>
        </div>
        <span class="glyphicon form-control-feedback glyphicon-remove"></span>
    </div>
    
    <div class="form-group has-feedback has-error">
        <label for="myselect2">A label</label>
        <div class="input-group">
            <div class="input-group-addon"><span class="glyphicon glyphicon-tag"></span>
            </div><div class="select-style">
            <select id="myselect2" class="form-control">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
            </div>
        </div>
        <span class="glyphicon form-control-feedback glyphicon-remove"></span>
    </div>
</div>