html - 如何更改禁用输入内的文本颜色？

Question

我试图在禁用但不工作时对输入内的文本应用不同的颜色。我正在使用 Material Ui

import React from "react";
    import { makeStyles } from "@material-ui/core/styles";
    import Input from "@material-ui/core/Input";

    const useStyles = makeStyles(theme => ({
      inputText: {
        color: "blue"
      }
    }));

    export default function Inputs() {
      const classes = useStyles();

      return (
        <form className={classes.root} noValidate autoComplete="off">
          <Input
            className={classes.inputText}
            defaultValue="Disabled"
            disabled
            inputProps={{ "aria-label": "description" }}
          />
        </form>
      );
    }

https://codesandbox.io/s/material-demo-lq3e9

Answer 1

var disabledElements = document.querySelectorAll('input[disabled]');

for (var i = 0, n = disabledElements.length; i < n; ++i) {
  disabledElements[i].style.color = 'red';
}

<input disabled value="green" />
<input value="red" />
<input disabled />