Fix input disabled style (#1636)

* fix: textarea disabled * fix: input disabled * fix: select disabled * fix: placeholder color * fix: select props * fix: mobile safari * fix: ie11 * fix: ie11 * 不要となった確認用storyを削除 * fix: css comment
kufu · Jun 24, 2021 · dae134b · dae134b
1 parent 9fd9791
commit dae134b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -163,6 +163,7 @@ const StyledInput = styled.input<
       color: ${palette.TEXT_BLACK};
       line-height: 1.6;
       box-sizing: border-box;
+      background-color: transparent;
 
       &::placeholder {
         color: ${palette.TEXT_GREY};

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -125,7 +125,7 @@ const Wrapper = styled.div<{
     `}
     ${disabled &&
     css`
-      background-color: ${palette.BASE_GREY};
+      background-color: ${palette.COLUMN};
       color: ${palette.TEXT_DISABLED};
     `}
   `
@@ -160,6 +160,14 @@ const SelectBox = styled.select<{ themes: Theme }>`
         opacity: 1;
       }
 
+      /* for IE11 */
+      &:disabled {
+        &,
+        &::-ms-value {
+          color: ${palette.TEXT_DISABLED};
+        }
+      }
+
       &::-ms-expand {
         display: none;
       }

diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
@@ -87,6 +87,7 @@ const StyledTextarea = styled.textarea<Props & { themes: Theme; textAreaWidth?:
       background-color: #fff;
       border: ${frame.border.default};
       box-sizing: border-box;
+      opacity: 1;
       ${error
         ? css`
             border-color: ${palette.DANGER};
@@ -96,10 +97,18 @@ const StyledTextarea = styled.textarea<Props & { themes: Theme; textAreaWidth?:
               border-color: ${palette.hoverColor(palette.MAIN)};
             }
           `}
+
+      &::placeholder {
+        color: ${palette.TEXT_GREY};
+      }
       &[disabled] {
         background-color: ${palette.COLUMN};
         pointer-events: none;
-        color: ${palette.TEXT_DISABLED};
+
+        &,
+        &::placeholder {
+          color: ${palette.TEXT_DISABLED};
+        }
       }
     `
   }}