反馈图标在与下拉列表一起使用时不能正确呈现
我在自举反馈方面遇到问题。 与下拉列表一起使用时, form-control-feedback
无法正确对齐。 就像我希望它显示在下拉列表后的右下角,就像它在IE 11中所做的一样(屏幕截图下方)。 这是有点在IE11工作,但不是在所有其他浏览器(Firefox,Chrome,Safari)。 我做了一点谷歌搜索,并没有找到任何声音的解决方法/解决方案,并不确定是否它的错误或他们的意图。
在这里创建了一个小提琴http://jsfiddle.net/12qcwbbw/。
看来这个CSS规则.has-feedback .form-control{padding-right: 42.5px;}
只适用于IE11。
这里是屏幕演员;
这是它在IE 11上呈现的内容,这是我在其他浏览器中需要的。
火狐
谷歌浏览器
苹果浏览器
这是我的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>
任何解决方法是赞赏!
没有一个跨浏览器的解决方案,因为每个浏览器都以不同的方式呈现<select>
元素(并且通过CSS,我们对它的控制非常有限),但是有一个替代方案可以适合您。
我使用CSS技巧使<select>
元素在视觉上类似于所有浏览器。 它的逻辑非常简单,它放置了一个包含<select>
的附加<div>
,它包含一个箭头图像作为背景,模拟了<select>
具有的箭头。
请参阅下面的代码片段:
.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>
链接地址: http://www.djcxy.com/p/29945.html
上一篇: feedback icon not rendering properly when used with dropdownlist