Question

我是HTML和CSS的新手，我正在寻找一种最佳/正确的方法来自定义我的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

2 个答案:

修改

编辑3