Bootstrap has-feedback icon does not display properly when used with drop-down list

Question

I am having a problem with upload feedback. form-control-feedback When used with a drop-down list, it does not align properly. How do I want it to appear in the right corner after , as shown in IE 11 (below screencast). It works in IE11, but not in all other browsers (Firefox, Chrome, Safari). I worked a little with the search engine and did not find any workarounds / solutions and did not know if there was an error or the way they were intended.

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

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

Here are the screenlists;

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

Firefox

Google chrome

Safari

Here is 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 welcome!

Answer 1

There is no cross-browser solution for this, since each browser displays the <select> element differently (and through CSS we have very limited control over it), but there is one alternative that may suit you.

I use the CSS trick to make the <select> elements visually look like all browsers. Its logic is very simple: it contains an additional <div> that wraps <select> , which has an arrow image as a background, which mimics the arrows that <select> .

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 a setting for your script, which is the <select> element inside the .has-feedback element.

Change the background property of the .select-style` rule to reposition 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>