如何修改UIkit复选框图标的背景颜色？

嘿，我来帮你搞定UIkit复选框背景颜色的调整问题！下面是两种实用的方法，你可以根据自己的项目情况选择：

方法1：直接用自定义CSS覆盖默认样式 #

UIkit的复选框样式是通过.uk-checkbox类以及对应的状态伪类来控制的，你只需要在自己的样式文件里添加以下代码，就能覆盖默认样式：

• 修改未选中状态的背景：

.uk-checkbox {
  background-color: #f0f5ff; /* 替换成你想要的颜色值，比如浅蓝 */
  border-color: #bfd8ff; /* 可选：同步调整边框颜色 */
}

• 修改选中状态的背景：
  复选框被选中时的样式由:checked伪类控制，针对这个状态单独设置：

.uk-checkbox:checked {
  background-color: #2563eb; /* 比如用深蓝色作为选中态背景 */
  border-color: #2563eb; /* 可选：让边框和背景色一致 */
}

方法2：用SCSS变量全局自定义（推荐） #

如果你的项目用的是UIkit的SCSS版本，直接修改内置变量会更规范，还能避免样式冲突：

// 在引入UIkit SCSS文件前定义变量
$form-checkbox-background: #f0f5ff;
$form-checkbox-background-active: #2563eb;
$form-checkbox-border: #bfd8ff;
$form-checkbox-border-active: #2563eb;

// 引入UIkit核心样式
@import "uikit/src/scss/uikit.scss";

小提示 #

• 记得把你的自定义样式放在UIkit官方样式之后加载，这样才能确保覆盖生效。
• 如果遇到默认样式加了!important的情况，你可能需要在自己的样式末尾也加上!important（尽量少用，万不得已再用）。

内容的提问来源于stack exchange，提问作者Mohammed