fix(input): text color is too shallow with disabled state in Safari, c…

…loses #3241
tusen-ai · Jul 6, 2022 · 3c06a36 · 3c06a36
1 parent d9acc59
commit 3c06a36
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 0 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -19,6 +19,8 @@
 - Fix `n-dropdown`'s menu may shift when it's entering.
 - Fix `n-dropdown`'s transform origin may not be correct in Chrome.
 - Fix `n-radio-button` may not have correct cursor style in some versions of chrome, closes [#3243](https://github.com/TuSimple/naive-ui/issues/3243).
+- Fix `n-input`'s text color is too shallow with disabled state in Safari, closes [#3241](https://github.com/TuSimple/naive-ui/issues/3241).
+- Fix `n-input`'s separator may have line wrap.
 
 ### Feats
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -19,6 +19,8 @@
 - 修复 `n-dropdown` 菜单出现可能会闪
 - 修复 `n-dropdown` 菜单的 transform origin 在 Chrome 上可能不正确
 - 修复 `n-radio-button` 在某些版本 Chrome 光标样式不正确，关闭 [#3243](https://github.com/TuSimple/naive-ui/issues/3243)
+- 修复 `n-input` 在 disabled 状态下在 Safari 上文本颜色过浅，关闭 [#3241](https://github.com/TuSimple/naive-ui/issues/3241)
+- 修复 `n-input` 的分割符可能折行
 
 ### Feats
 

diff --git a/src/input/src/styles/input.cssr.ts b/src/input/src/styles/input.cssr.ts
@@ -65,6 +65,7 @@ export default cB('input', `
     background-color: #0000;
     text-align: inherit;
     transition:
+      -webkit-text-fill-color .3s var(--n-bezier),
       caret-color .3s var(--n-bezier),
       color .3s var(--n-bezier),
       text-decoration-color .3s var(--n-bezier);
@@ -207,6 +208,7 @@ export default cB('input', `
       align-items: center;
       transition: color .3s var(--n-bezier);
       color: var(--n-text-color);
+      white-space: nowrap;
     `, [
       cB('icon', `
         color: var(--n-icon-color);
@@ -225,6 +227,7 @@ export default cB('input', `
       cursor: not-allowed;
       color: var(--n-text-color-disabled);
       text-decoration-color: var(--n-text-color-disabled);
+      -webkit-text-fill-color: var(--n-text-color-disabled);
     `),
     cE('placeholder', 'color: var(--n-placeholder-color-disabled);'),
     cE('separator', 'color: var(--n-text-color-disabled);', [