Question

我正在尝试设置占位符的css样式。
所以我在输入类中给了红色
但仍然没有改变。
我研究并找到了此链接Styling the placeholder in a TextField
但仍然没有运气
你能告诉我如何解决它吗？
在下面提供我的代码段和沙箱。

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

input: {
    marginLeft: 8,
    flex: 1,
    "&::placeholder": {
      // fontSize: '14 !important',
      color: "red"
    }
  },

  <InputBase
          className={classes.input}
          placeholder="Search Google Maps"
          inputProps={{ "aria-label": "Search Google Maps" }}
        />

Answer 1

应该使用className属性代替classes属性，以覆盖InputBase组件的默认样式。

我认为className在这种情况下不起作用的原因是，className仅针对包装器元素的样式，而classes将允许您完全覆盖特定的InputBase的元素，例如input本身。您可以在here上的文档中进一步了解它。

<InputBase
  classes={{
    input: classes.input,
  }}
  placeholder="Search Google Maps"
/>

我已通过here为您复制了一个演示。

Answer 2

/* try this */
/* Attention: There is a space between & and ::-webkit-input-placeholder */

input: {
    marginLeft: 8,
    flex: 1,
    "& ::-webkit-input-placeholder": {
      color: "red !important"
    }
  }

此外，像这样设置输入占位符

::-webkit-input-placeholder { /* WebKit browsers */
  color: "red"
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: "red"
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
 color: "red"
}

Answer 3

我相信您想要的是伪选择器::placeholder { color: red; }

CanIUse.com表明这已被广泛接受。

这将使占位符为红色，但输入内容可以设置为您指定的任何颜色。

设置占位符的CSS样式

3 个答案: