带下拉列表作为组插件的文本框

Question

我正在尝试使用Dropdown作为引导程序中的组加载项：

<div class="col-md-5">
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">@Html.DropDownListFor(m => m.SelectedCountryCode, new SelectList(Model.ListOfCountries, "PhoneCode", "PhoneCode"), "Select")</div>
      @Html.TextBoxFor(m => Model.Value, new { @class = "form-control" })
    </div>
  </div>
</div>

这是我得到的结果：

还有另一种方法可以做到这一点，所以我的下拉样式与文本框相同吗？

我不希望下拉列表周围出现灰色部分。

这是一个JSFiddle：

https://jsfiddle.net/mdawood1991/yLygh0v4/

Answer 1

您可以使用input-group-btn下拉列表：

  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
        aria-expanded="false">Select <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">0044</a></li>
      <li><a href="#">0033</a></li>
      <li><a href="#">001</a></li>
    </ul>
  </div><!-- /btn-group -->

Fiddle.

---

或者，您可以从.input-group-addon：

中删除填充

.input-group-addon {
    padding: 0 !important;
    background: transparent;
}

Fiddle.

Answer 2

这是解决此问题的最佳方法。使用以下方式设置下拉列表：

background: transparent; 
border: 0;

然后它看起来像这样：

开放时：

Answer 3

如何设置选择框的样式？

select{
background-color: transparent;
}

可能是我的问题出错：）

然后该区域在我的手机上消失了。我在iOS 8上使用safari。

Answer 4

您还可以覆盖该类的背景颜色：

.input-group-addon {
    background: white;
}

或者只是在现有的CSS中更改它。