反馈图标在与下拉列表一起使用时不能正确呈现

我在自举反馈方面遇到问题。 与下拉列表一起使用时, 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

下一篇: Android Library Project with React Native