Angular项目中Primeng InputNumber与Calendar在Chrome的样式异常

一、CSS样式覆盖（优先尝试） #

针对Chrome默认的表单用户代理样式，添加全局CSS重置PrimeNG组件的冲突样式：

1. 修复InputNumber的黑/白圆圈问题 #

将以下代码添加到全局样式文件（如styles.scss）：

/* 隐藏Chrome数字输入框默认的增减按钮 */
.p-inputnumber input::-webkit-inner-spin-button,
.p-inputnumber input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* 移除Chrome输入框focus时的默认轮廓/阴影 */
.p-inputnumber input:focus {
  outline: 0 !important;
  box-shadow: none !important;
}
/* 清除Chrome自带的输入框清除按钮（如果存在） */
.p-inputnumber input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

2. 修复Calendar空字段显示异常 #

同样添加到全局样式文件：

/* 重置Chrome日期输入框的默认编辑区域样式 */
.p-calendar input::-webkit-datetime-edit {
  color: inherit;
}
.p-calendar input::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
/* 确保占位符正常显示 */
.p-calendar input::placeholder {
  opacity: 1;
  color: var(--placeholder-color, #9e9e9e); /* 可根据项目主题调整 */
}

注：若组件启用了样式隔离，可临时在组件样式中使用::ng-deep提升全局样式优先级，或调整全局样式选择器确保覆盖PrimeNG组件样式。

二、升级PrimeNG版本 #

Chrome 130属于较新版本，旧版PrimeNG可能存在兼容性问题：

• 对照Angular版本，升级PrimeNG到对应最新稳定版（如Angular 17对应PrimeNG 17.x）
• 升级后重新验证组件样式

三、关闭Chrome硬件加速 #

Ubuntu下Chrome的硬件加速可能引发渲染异常：

1. 打开Chrome设置，进入「系统」选项
2. 关闭「使用硬件加速模式（如果可用）」
3. 重启Chrome后检查问题是否解决

四、排查自定义样式冲突 #

检查项目中的全局CSS或组件样式，是否存在针对input标签的通用样式（如border-radius、background、伪元素规则）覆盖了PrimeNG组件样式：

• 用Chrome开发者工具（F12）定位异常元素，查看样式优先级
• 调整自定义样式的选择器范围，避免直接影响PrimeNG组件

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