我想删除离子切换周围的边框
<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>
答案 0 :(得分:2)
如果您不想为切换显示边框,只需添加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 .noToggleBorder{border:0;}
这里有一个codepen供您查看。