uniapp checked样式怎么修改

1. uniapp中checked样式的默认值

在uniapp中，checked样式是用来表示选择框、单选框或者开关的打开或关闭状态的样式属性。在默认情况下，checked状态下的样式由系统自动设置，但是样式的表现形式与设备类型有关，Android和iOS设备在checked样式上的差异较大。

1.1 Android设备的checked样式

在Android设备中，checked状态的表现是当选项被选中时，表现为一个带勾选框的选项，而当选项未被选择时，仅显示一个空的checkbox。在代码中，我们可以通过以下方式来定义checkbox选中样式以达到自定义checked样式的效果。

  <style>
    input[type="checkbox"]:checked + label::before {
      content: "";
      display: inline-block;
      width: 22px;
      height: 22px;
      margin-top: -4px;
      margin-right: 8px;
      background-color: #007aff;
      border: 1px solid #007aff;
      border-radius: 4px;
      vertical-align: middle;
    }  
  </style>

在上面的代码中，我们把选项的input元素和label元素关联在了一起，当选项被勾选时，自定义的checked样式就会被触发并显示在页面上。

1.2 iOS设备的checked样式

与Android设备不同，iOS设备中的checkbox样式始终是被包装在一个圆形的容器之中，并且无法通过自定义样式来实现类似Android这样的自定义checked效果。iOS的checkbox样式表现为一个圆圈，在圆圈里面包含一个小的白色勾选框，在checked状态下，勾选框会被填充成蓝色。

2. uniapp中checked样式的自定义

从上面的描述我们可以看出，uniapp在Android和iOS设备上的checkbox样式有着不同的表现形式，如果我们想要对checked样式进行自定义的话，我们需要对Android和iOS设备分别进行处理。

2.1 Android设备下checkbox样式的自定义

要对Android设备下的checkbox样式进行自定义，我们需要在代码中添加如下的样式规则：

  /* 定义选中状态下的样式 */
  input:checked + label::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid #007aff;
    border-radius: 50%;
    margin-right: 8px;
    background-color: #007aff;
  }
  /* 定义未选中状态下的样式 */
  label::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 3px solid #C7C7CC;
    border-radius: 50%;
    margin-right: 8px;
  }

在上面的样式代码中，我们定义了选中状态下checkbox的样式和未选中状态下checkbox的样式。其中，选中状态下checkbox的样式向外扩张了，它的背景颜色变成了#007aff，并且增加了蓝色勾选框的标记。

2.2 iOS设备下checkbox样式的自定义

在iOS设备下，checkbox的样式不可被自定义，但是我们可以通过改变input元素的type属性来更改checkbox的样式。uniapp中支持的类型包括：checkbox、switch和radio。这里我们就以radio为例来进行讲解。

首先，我们将原来的input元素的type属性值更改为radio，并为它重新定义一个类名custom-radio，在样式中定义custom-radio的样式。如下所示：

  <input type="radio" class="custom-radio" value="value" name="name" id="id">
  <label for="id"></label>

  /* 定义选中状态下的样式 */
  .custom-radio:checked + label::before {
    background-color: #007aff;
    border-color: #007aff;
  }
  /* 定义未选中状态下icon和文字的颜色 */
  .custom-radio + label::before {
    background-color: #fff;
    border-color: #C7C7CC;
  }
  .custom-radio + label {
    color: #2B2B2D;
  }

在上面的样式代码中，我们可以发现，在iOS设备下，checkbox的样式可以随着input元素的type属性而发生变化。通过更改type属性为radio，我们可以实现一个类似单选框的效果。再通过为input元素添加类名custom-radio并为它重新定义样式，我们就可以对radio进行自定义的样式设置。其中，选中状态下radio的样式被设置为背景色为#007aff，边框颜色同样为#007aff；未选中状态下radio的icon和文字的颜色被设置为白色，而label的颜色被设置为黑色。

3. 总结

在uniapp中，Chrome和Safari浏览器下，checkbox样式是一致的。但是在Android和iOS设备下，checkbox的样式表现不同。如果我们想要对checked样式进行自定义，就需要区分处理Android和iOS设备下的样式，并针对其进行相应的样式设置。在Android上，根据项目需要使用Pseudo-Class语法为选中和未选中的状态各定义一种样式；在iOS上，将input元素的type属性更改为radio，通过添加类名自定义样式，实现radio样式的自定义。