如何删除离子切换周围的边框

Posted 2023-03-16

【中文标题】如何删除离子切换周围的边框

【英文标题】：how to remove border around ion-toggle

【发布时间】：2017-03-04 21:29:22

【问题描述】：

我想移除离子开关周围的边框

<ion-content  ng-init="checkarrivee.getAllListeCriteres();">
<div class="swipe" on-swipe-left="warn('Must use scope')">Swipe div</div>
<div class="list" style="width: 95%;margin-left: 2%">
  <span us-spinner="color: 'blue', radius:30, width:8, length: 16" spinner-key="spinner-0"></span>

  <label class="item item-input item-stacked-label">
    <span class="input-label">Mission en cours :</span>
    <input ion-autocomplete name="vehicule" type="text" readonly="readonly" class="ion-autocomplete"


           items-clicked-method="itemsClicked(callback)"
           items-removed-method="itemsRemoved(callback)"
           placeholder="Séléctionner une mission"
           items-method="getMissionEnCours(query)"
           external-model="initialCountry"
           item-view-value-key="codeDeFicheDeMission"

           items-method-value-key="items"
           max-selected-items="1"
           autocomplete="off"
           ng-model="checkarrivee.ficheDeMission"
           required/>
  </label>
</div>
<ion-list   ng-repeat="(key,value) in checkload | groupBy:'Niveau'">
  <div class="item item-divider" >key</div>
  <ion-item  on-swipe-left="warn('Must use scope')" ng-repeat="var in value" >


    <ion-toggle ng-model='checkarrivee.boo[var.id]'  ng-click="checkarrivee.isMissionSelected(var.id,checkarrivee.ficheDeMission.id)" toggle-class="toggle-positive">var.designation</ion-toggle>
    <button  class="button button-clear icon ion-star button-assertive"
            ng-click="toggleStar(var)" ng-show="var.star">
    </button>
    <ion-option-button class="button-dark" >
      <i class="icon ion-star"></i>
    </ion-option-button>
  </ion-item>
</ion-list>

图片：

【参考方案1】：

如果您不想为切换显示边框，只需像这样添加style='border:0;'：

<ion-toggle style="border:0;" ng-model='checkarrivee.boo[var.id]'  ng-click="checkarrivee.isMissionSelected(var.id,checkarrivee.ficheDeMission.id)" toggle-class="toggle-positive">var.designation</ion-toggle> 

但我建议不要使用内联 CSS，而是将所有样式添加到您的 css/scss 文件中，因为随着项目规模的扩大，维护起来会变得更加困难。

编辑：

对于 CSS，它将类似于 .list .item .noToggleBorderborder:0;

这里有一个codepen 供您查看。