bootstrap 自定义下拉文本 css

Question

我是 HTML 和 CSS 的新手，我正在寻找 best/correct 自定义我的 bootstrap 组件的方法。我需要将 bootstrap 下拉菜单更改为如下所示：

到目前为止我所做的是：

http://www.bootply.com/5DztqTZYIe

我的问题是我不知道如何处理不断变化的下拉文本菜单，使它看起来像图像（右上角有小三角形，选中的菜单带有复选标记）。

感谢任何帮助。

HTML代码：

<div class="btn-group " uib-dropdown="" is-open="status.isopen">
     <button id="single-button" type="button" class="btn btn-primary drop" ng-disabled="disabled" data-toggle="dropdown">
         <div class="preCaretDiv"><div class="preCaretText">Relative Difference </div> <div class="caretCircle"><span class="caret"></span></div></div>
     </button>
   <ul class="dropdown-menu">    
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
  </ul>

</div>

和 CSS:

.btn.drop {
  background: #e1e6e4;
  border-color: #e1e6e4;
  color: #25373e;

}

.caretCircle {
      float:right;
      background-color:white;
      border-radius:50%;
      height:1em;
      width:1em;  
      margin-top:.2em;
      margin-left:.25em;
      color:#25373e;

  }

.caretCircle .caret {
  padding-bottom:.5em;      
  border-top-width:.3em;
  border-right-width:.3em;
  border-left-width:.3em;
}

.preCaretText {
  float:left;
}

.preCaretDiv
{
  display: inline-flex;
}

 .dropdown-menu>li>a {
    background-color: #25373e;
    color:#ffffff;
  }

.btn.drop:focus, .btn.drop:active, .open > .dropdown-toggle.btn{
  background: #b2babb !important;
  border-color: #b2babb !important;
  color: #25373e !important;
  .caretCircle {
    background-color:#25373e !important;
    color:#00e0b8 !important;
  }
}

Answer 1

尝试添加这个 CSS。

.open>.dropdown-menu {
    background-color: #25373e;
    margin-top:10px;
}

.open>.dropdown-menu:after, 
.open>.dropdown-menu:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.open>.dropdown-menu:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #25373e;
    border-width: 8px;
    right: 5%;
    margin-left: -8px;
}
.open>.dropdown-menu:before {
    border-color: rgba(113, 158, 206, 0);
    border-bottom-color: #25373e;
    border-width: 9px;
    right: 5%;
    margin-left: -10px;
}

示例bootply

编辑

为了使复选标记起作用，我们需要一点 javascript 和更多一点 CSS

我们的javascript:

$("ul.dropdown-menu>li>a").click(function(e) {
  console.log(e)
  $("ul.dropdown-menu>li>a").removeClass("option-selected");
  $(e.target).addClass("option-selected");
});

还有我们的额外 CSS:

.option-selected:after {
    content: '✔';
    color: #27f1ce;
    font-weight:bold;
    font-size:14px;
    float:right;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #1e2c32;
}

例子bootply.

如果你包含 font-awesome，你可以使用这个 CSS 来获得更好的复选标记。

.option-selected:after {
    font-family: FontAwesome;
    content: "\f00c";
    color: #27f1ce;
    font-weight:bold;
    font-size:14px;
    float:right;
}

编辑 3

Final bootply。这个包含一些其他样式，使其与原始样式更相似。

我的版本：

Answer 2

你可以看到这个例子，希望你能服务 http://semantic-ui.com/modules/dropdown.html

bootstrap 自定义下拉文本 css

bootstrap dropdown text customize css

html

css

twitter-bootstrap

drop-down-menu

angular-ui-bootstrap

编辑

编辑 3