如何在ionic框架中为ios设置方形复选框？

离子复选框在android中显示为方形，但在IOS中显示为四舍五入

---

如何在IOS中使其成为方形？

在您的checkbox类中使用checkbox square系统定义的css类

<ion-checkbox class="checkbox-square" ng-model="isCheckedCommercial">value 1</ion-checkbox>

值1

这对你有帮助。 如果您有任何疑问，请告诉我。

您可以使用以下选项进行全局设置： $ionicConfigProvider.form.checkbox（“圆圈”）

---

更多信息：

本机iOS使用。Ionic尝试使用与本机控件类似的组件。这一次不太成功，但也许圆圈更接近于原生的iOS感觉。因此，我会坚持这样做：使用离子手段也遵循他们的设计。

将此添加到您的scss文件中

.checkbox-icon {
        border-radius: 0%!important
}

---

更改复选框md将修复此问题。 在html文件集中， class=“checkbox md”

我刚刚用过这个

<ion-checkbox mode="md"></ion-checkbox>

---

以下代码适用于爱奥尼亚版本3：

.item {
      .checkbox {
        .checkbox-icon {
          border-radius: 0% !important;
        }
      }
    }

---

这将有助于解释为什么这会有帮助。Ionics内置的复选框样式在默认情况下具有50%的边界半径，使其成为圆形。所以我们用边界半径0%覆盖它！重要信息：删除导致圆圈的样式。添加一些说明

模式

属性可以更改项目的呈现方式。如果要在非ios设备上使用圆形复选框，可以将

模式设置为“ios”
.item {
      .checkbox {
        .checkbox-icon {
          border-radius: 0% !important;
        }
      }
    }