Question

我正在尝试更改占位符的字体大小。因此，我在下面的类中添加了字体大小，但它没有变化。

您能告诉我如何修复它，以便将来自己修复。

在下面提供我的代码段和沙盒

 cssLabel: {
    "&$cssFocused": {
      color: purple[500],
      fontSize: 14
    }
  },
  cssFocused: {},
  cssUnderline: {
    "&:after": {
      borderBottomColor: purple[500],
      fontSize: 14
    }
  },
  cssOutlinedInput: {
    "&$cssFocused $notchedOutline": {
      borderColor: purple[500],
      fontSize: 14
    }
  },
  notchedOutline: {},

Answer 1

为了实现您的目标，您必须在InputProps中更改输入样式属性，例如：

注意：如果占位符溢出，它将显示...。

const styles = theme => ({
  input: {
    "&::placeholder": {
      textOverflow: "ellipsis !important",
      color: "blue",
      fontSize: 14
    }
  }
});

和

该组件应为：

<TextField
  InputProps={{
   classes: {
     input: classes.input
   }
  }}
  variant="outlined"
  placeholder="Exp. XXXXXXXXXXXX"
/>

请在此处找到代码沙箱：https://codesandbox.io/s/9j479w189y

Answer 2

要更改占位符样式，您可以使用以下代码：

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

来源：CSS-tricks

更改占位符的字体大小

2 个答案: