Angular 15中如何将input type checkbox改为绿色？

以下是针对你遇到的复选框始终显示蓝色的解决方案：

1. 确认Tailwind配置中定义了success颜色 #

首先检查你的tailwind.config.js文件，确保已经在颜色扩展中添加了自定义的success绿色值，否则text-success这类类不会生效：

module.exports = {
  theme: {
    extend: {
      colors: {
        success: '#10b981', // 可替换为你需要的绿色色值
      },
    },
  },
}

2. 重置复选框默认样式并自定义 #

原生<input type="checkbox">的默认样式难以直接覆盖，需要用appearance-none重置默认样式，再手动定义选中/未选中状态的样式：
修改后的组件HTML代码：

<input 
  type="checkbox" 
  class="h-5 w-5 rounded border-gray-300 text-success focus:ring-success cursor-pointer appearance-none checked:bg-success checked:border-success checked:bg-checkmark checked:bg-center checked:bg-no-repeat"
  (change)="applyFilters(filter.value, $event)"
/>

3. 添加选中状态的对勾图标（可选） #

因为appearance-none会去掉默认的对勾，你可以在tailwind.config.js中添加一个SVG背景图作为选中标识：

module.exports = {
  theme: {
    extend: {
      colors: {
        success: '#10b981',
      },
      backgroundImage: {
        'checkmark': "url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22%3E%3Cpath fill=%22none%22 stroke=%22white%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%222%22 d=%22M6 10l3 3l6-6%22/%3E%3C/svg%3E')",
      },
    },
  },
}

4. 确保Tailwind在Angular中正确导入 #

检查项目根目录的styles.css（或styles.scss）文件，确认已正确导入Tailwind指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

5. 清除缓存并重启服务 #

如果修改后样式仍不生效，尝试清除Angular和Tailwind的缓存：

# 停止当前Angular服务后执行
ng build --delete-output-path
# 然后重启服务
ng serve

内容的提问来源于stack exchange，提问作者Şerban-Gabriel Şulea