Question

我一直在尝试使用bootstrap找到一个带有选择下拉列表的输入框。我发现你可以使用http://v4-alpha.getbootstrap.com/components/input-group/

获得类似的效果

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
  <div class="input-group-btn">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Action
    </button>
    <div class="dropdown-menu dropdown-menu-right">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

这有效但不是我想要实现的目标。 eBay正是我所寻找的，但我找不到它http://bulksell.ebay.com/ws/eBayISAPI.dll?ListingTemplate&mode=AddItem

它只是一个带有箭头的文本框，右侧有一个下拉列表。它没有输入插件或分隔符，如上面的代码所示。

如何使用bootstrap完成？

Answer 1

在大多数情况下，浏览器和操作系统会确定选择框的样式，而且几乎不可能仅使用CSS来更改它们。你必须研究替代方法。主要技巧是应用appearance: none，它可以覆盖一些样式。

我最喜欢的方法就是这个：

<label>
    <select>
        <option selected> Select Box </option>
        <option>Short Option</option>
        <option>This Is A Longer Option</option>
    </select>
</label>

body, html {background:#444; text-align:center; padding:50px 0;}

/* The CSS */
select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #f8f8f8;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}

label {position:relative}
label:after {
    content:'<>';
    font:11px "Consolas", monospace;
    color:#aaa;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}

我认为bootstrap中没有下拉默认样式。

使用Twitter Bootstrap输入带有下拉选项的文本框

1 个答案: