无法在平板电脑和 iPad 的复选框中显示右刻度线

Question

我有以下代码，它显示在桌面上打勾的复选标记。但不适用于 iPad 和平板电脑。功能正常，但未显示正确的标记。

<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 borderAtRight" 
					
  <!--  Dropdown and Menu -->
  <div class="btn-group topFilterCtrl filterDropdn" dropdown 
    dropdown-append-to-body
    id="ddlStatus">
      <div id="btn-append-to-body" type="button" 
        class="btn btn-primary panelTextFont14 noBorder" 		
        dropdown-toggle>
        Status<span class="caret caretSpan"></span>
      </div>
      <ul class="dropdown-menu dropDownLabel" role="menu" 
        aria-labelledby="btn-append-to-body" 
        ng-show="!vm.showthis">
          <div class="customScroll">
            <li role="menuitem" class="changeColorOnHover"
              ng-repeat="optionThis in vm.List track by $index" 
              ng-show="list.value != null">
              <a href="#">
              <div class="checkbox" id="{}index}"
                ng-show="this.value != null"
                ng-click="vm.applyFilterForResultCount()"
                ng-change="vm.getCount(this)"
                ng-model="this.flag">
                <label>
                  <input type="checkbox" 
                    ng-click="vm.clickStatusCheckBox(this);$event.stopPropagation();" 
                    ng-show="this.value != null"/>
                  {{this.value}}
                </label>
              </div>
            </a>
          </li>
        </div>
        <!--Clear div-->
        <li role="menuitem" class="btn btn-default buttonli"
          ng-click="vm.clearAll()">
          <a href="#">
            <p>
              <span class="clearAllBtn">Clear</span>
              <span class="dropDownBtnItem">  – All </span>
            </p>
          </a>
        </li>
      </ul>
    </div>
  </div>

.topFilterCtrl{
    text-align: left;
    vertical-align: middle;
    padding-top: 8%;
    padding-bottom: 0%;
    border-radius: 0;
    margin-top: 0%;
    box-shadow: none;
    outline: none;
    border:none;
    width:100%;
}

portrait:

div.borderAtRight .filterDropdn{
    padding-top:14%;
}

.filterDropdn{
    padding-top: 10%;
    height: 50px;
    max-height: 50px;
    overflow: hidden;
}

.noBorder{
    text-align: left;
    width:@full-width;
    box-shadow: none;
    outline: none;
    min-width: 80%;
    padding: 0;
    height: auto;
    min-height: 36px;
    border-top-color: none;
    border-top-style: none;
    border-top-width: none;
    border-right-color: none;
    border-right-style: none;
    border-right-width: none;
    border-bottom-color: none;
    border-bottom-style: none;
    border-bottom-width: none;
    border-left-color: none;
    border-left-style: none;
    border-left-width: none;
}

.dropDownLabel{
    margin:0 0 0 -16px;
}

.customScroll{
    height: auto;
    overflow-x: hidden;
    max-height:360px;
}

.customScroll>li>a, 
.customScroll>li>a:hover, 
.customScroll>li>a:active, 
.customScroll>li>a:focus {
    display: block;
    padding: 1px 22px;
    clear: both;
    white-space: nowrap;
    text-decoration : none;
}

.buttonli {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    margin: 2px 0px 2px 0px;
    width: 100%;
    background-color:#E4EAEF;
}

li.buttonli > a > p{
    margin-bottom:0;
}

input[type="checkbox"]{
    -webkit-appearance: checkbox;
}

我发现了这个：https://github.com/angular-ui/bootstrap/issues/2017

但不确定如何实现它，因为我对 AJS 非常陌生，我应该在代码中真正包含该指令的哪个位置？

Answer 1

复选框可能无法正确显示，因为input 元素嵌套在label 元素内（即使它可能被允许，它也会混淆输入和标签的用途）。

如果问题在于默认情况下未选中复选框，您可能需要检查 Angular 的 ng-checked="expression" 语法。