fix(input): text-color of disabled in safari

varletjs · Sep 29, 2021 · dd33256 · dd33256
1 parent cfe2d7b
commit dd33256
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/packages/varlet-ui/src/input/docs/en-US.md b/packages/varlet-ui/src/input/docs/en-US.md
@@ -174,4 +174,4 @@ Here are the CSS variables used by the component, Styles can be customized using
 | `--input-input-text-color` | `#555` |
 | `--input-line-size` | `1px` |
 | `--input-line-spread-size` | `2px` |
-| `--input-disabled-color` | `#aaa` |
+| `--input-disabled-color` | `var(--color-disabled)` |
diff --git a/packages/varlet-ui/src/input/docs/zh-CN.md b/packages/varlet-ui/src/input/docs/zh-CN.md
@@ -173,4 +173,4 @@ createApp().use(Icon)
 | `--input-input-text-color` | `#555` |
 | `--input-line-size` | `1px` |
 | `--input-line-spread-size` | `2px` |
-| `--input-disabled-color` | `#aaa` |
+| `--input-disabled-color` | `var(--color-disabled)` |
diff --git a/packages/varlet-ui/src/input/input.less b/packages/varlet-ui/src/input/input.less
@@ -9,7 +9,7 @@
 @input-icon-size: 20px;
 @input-line-size: 1px;
 @input-line-spread-size: 2px;
-@input-disabled-color: #aaa;
+@input-disabled-color: var(--color-disabled);
 
 :root {
   --input-input-text-color: @input-input-text-color;
@@ -158,6 +158,8 @@
   }
 
   &--disabled {
+    -webkit-text-fill-color: var(--input-disabled-color);
+    opacity: 1;
     color: var(--input-disabled-color);
   }