reactjs 如何将React CSS的输入框中的占位符文本作为目标?

f0ofjuux  于 2022-12-12  发布在  React
关注(0)|答案(1)|浏览(124)

Screenshot of code for input box
我想为“placeholder”添加CSS,但我找不到为React添加CSS的方法。我已尝试使用"&:placeholder“:{但是这不起作用,请让我知道从这里去哪里,谢谢。
我已尝试添加“&:占位符”:{在CSS代码中为输入样式。

xbp102n0

xbp102n01#

在react中使用pseudo-class样式时使用类名而不是样式属性
https://www.w3schools.com/howto/howto_css_placeholder.asp
因此:
App.jsx

<input className="my-input" placeholder="Search here..." />

styles.css

.my-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: red;
  opacity: 1; /* Firefox */
}

.my-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}

.my-input::-ms-input-placeholder { /* Microsoft Edge */
  color: red;
}

相关问题