通过带有角度的纯CSS制作一个复选框

Question

我正在尝试使用angular下拉复选框而不使用第三方库。

    <div class="label-wrapper">
        <label>
            Filter By:
        </label>
    </div>

    <div class="dropdown-wrapper">
        <input type="text" placeholder="filterCtrl.myInput" ng-focus="inputFocus(true)" ng-blur="inputFocus(false)">
        <ul 
          class="multi-checkbox-dropdown" 
          ng-focus="dropdownFocus(true)" 
          ng-blur="dropdownFocus(false)" 
          ng-if="filterCtrl.dropDownInputFocus">

         <li ng-repeat="value in filterCtrl.filterList">
          <input type="checkbox" value="value.name" ng-model="filterCtrl.filterValue2[value.name]"/>
          {{value.name}}
         </li>
        </ul>
    </div>

以下是点击下拉列表时的样子

以下是未点击下拉列表时的样子

这就是我希望它看起来像使用css

我很困惑

1. 如何制作一个环绕ul的包装容器，使其覆盖在溢出的元素之上？
2. 如何使Filter By:标签不被ul？
推下

任何帮助将不胜感激。感谢