fix(input): autofill's default background color (#5127)

* fix(input): autofill's default background color, closes #5123 * Update src/input/src/styles/input.cssr.ts --------- Co-authored-by: 07akioni <[email protected]>
tusen-ai · Dec 19, 2023 · 2af346a · 2af346a
1 parent 3a9798d
commit 2af346a
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -10,6 +10,7 @@
 - Fix `n-notification` notification clips out of screen when screen width is less than 400px wide.
 - Fix `n-carousel` transition effect incorrect when using the `slide` effect in loop mode with only two elements, closes [#4323](https://github.com/tusen-ai/naive-ui/issues/4323).
 - Fix `n-carousel` trigger incorrect `current-index` value on arrow button click with single image, closes [#5130](https://github.com/tusen-ai/naive-ui/issues/5130).
+- Fix `n-input` autofill's default background color, closes [#5123](https://github.com/tusen-ai/naive-ui/issues/5123).
 
 ### Features
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -10,6 +10,7 @@
 - 修复 `n-notification` 通知在屏幕宽度小于 400px 的时候溢出屏幕
 - 修复 `n-carousel` 在只有两个元素时，过渡效果为 `slide` 且循环播放时过渡效果有问题，关闭 [#4323](https://github.com/tusen-ai/naive-ui/issues/4323)
 - 修复 `n-carousel` 在只有一张图片时点击箭头切换按钮触发的 `current-index` 值不正确，关闭 [#5130](https://github.com/tusen-ai/naive-ui/issues/5130)
+- 修复 `n-input` 自动填充时的默认背景色，关闭 [#5123](https://github.com/tusen-ai/naive-ui/issues/5123)
 
 ### Features
 

diff --git a/src/input/src/styles/input.cssr.ts b/src/input/src/styles/input.cssr.ts
@@ -92,7 +92,11 @@ export default cB('input', `
     `),
     c('&:-webkit-autofill ~', [
       cE('placeholder', 'display: none;')
-    ])
+    ]),
+    // overlay autofill's default background color
+    c('&:autofill, &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active', `
+      box-shadow: inset 0 0 0 var(--n-height) var(--n-color);
+    `)
   ]),
   cM('round', [
     cNotM('textarea', 'border-radius: calc(var(--n-height) / 2);')