Question

我遇到了自举反馈问题。 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 上呈现的内容以及我想要的其他浏览器。

Firefox

Google Chrome

Safari浏览器

这是我的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>

感谢任何解决方法！

Answer 1

没有针对此的跨浏览器解决方案，因为每个浏览器都以不同的方式呈现<select>元素（并且通过CSS我们对它的控制非常有限），但是有一种替代方案可以适合您。

我使用CSS技巧使<select>元素在视觉上与所有浏览器相似。它的逻辑非常简单，它放置了一个额外的<div>，它将包含箭头图像的<select>包裹为背景，模仿<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>

使用上述技巧我对您的场景进行了调整，这是<select>元素中的.has-feedback元素。

更改.select-style`规则的background属性以更改箭头图标的位置。

.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>

与dropdownlist

1 个答案: