如何像使用 html css 和 bootstrap 4 的 Gmail 一样创建多重检查下拉菜单？答案

【问题标题】：How to create multicheck dropdown just like Gmail using html css and bootstrap4?如何像使用 html css 和 bootstrap 4 的 Gmail 一样创建多重检查下拉菜单？
【发布时间】：2018-08-14 00:46:14
【问题描述】：

我想像 Gmail 一样创建一个多选下拉菜单。像这样的：

我所取得的成就是：

看起来不太好。

有人可以建议我如何实现接近上图的效果吗？

更新：

为我的多选下拉菜单添加代码。

<th >
                            <div class="dropdown text-center">
                                    <input type='checkbox' value='loadBalancing' [(ngModel)]="selectedAll" (change)="selectAll($event)">
                                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="margin-left:33%; margin-top: -2%">
                                      <a class="dropdown-item" href="#" (click)="selectAll(true)">SelectAll</a>
                                      <a class="dropdown-item" href="#" (click)="selectAll(false)">None</a>
                                    </div>
                                  </div>
                        </th>

【问题讨论】：

你能分享你的代码sn-p吗？
@nutboltu 查看更新。
使用棱角材料
我们不能使用 bootstrap4 来实现它吗？

标签： html css angular bootstrap-4

【解决方案1】：

.btn.dropdown-toggle {
   background: #e2e4e6;
   border: 1px solid #c3c3c3;
   color: #949494;
   padding: 3px 20px;
   border-radius: 0;
}

.btn.dropdown-toggle:focus {
  outline: none;
  box-shadow: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<th >
  <div class="dropdown text-center" role="button">
    <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <input type='checkbox' value='loadBalancing' [(ngModel)]="selectedAll" (change)="selectAll($event)">
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="margin-left:33%; margin-top: -2%">
      <a class="dropdown-item" href="#" (click)="selectAll(true)"> SelectAll
      </a>
      <a class="dropdown-item" href="#" (click)="selectAll(false)">None
      </a>
     </div>
  </div>
</th>

【讨论】：

这就是我要找的！！