feedback icon not rendering properly when used with dropdownlist
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!
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>上一篇: Python未经替换/与旧版本无关