更改占位符的字体大小答案

【问题标题】：Change the font size of the placeholder更改占位符的字体大小
【发布时间】：2019-05-23 01:29:41
【问题描述】：

我正在尝试更改占位符的字体大小。所以我在下面的类中包含了字体大小，但它没有改变。

你能告诉我如何修复它，以便我以后自己修复它。

在下面提供我的coden-p和沙箱

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

【问题讨论】：

w3schools.com/howto/howto_css_placeholder.asp
Changing font-family for placeholder的可能重复

标签： javascript html css reactjs material-ui

【解决方案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

【讨论】：

嘿，它的工作原理......你能告诉我你是如何修复它的，所以将来我会自己修复它
没有给 textoverflow 也提供它的工作...你能告诉我为什么我们需要 textoverflow
请您选择这个作为正确答案，以便其他人可以从中受益。如果占位符文本比文本框长，则使用文本溢出，然后应用“...”符号。要像我一样解决这个问题，您需要阅读此处的文档：material-ui.com/api/input。在那里你可以找到 CSS API。除了那个输入还有占位符选择器。（这就是我覆盖它的方式）

【解决方案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

【讨论】：