[英]Change the font size of the placeholder
I am trying to change the font size of the placeholder.我正在尝试更改占位符的字体大小。 So I included font size in the below classes but it's not changing.
所以我在下面的类中包含了字体大小,但它没有改变。
Can you tell me how to fix it so that in future I will fix it myself.你能告诉我如何修复它,以便将来我自己修复它。
Providing my codesnippet and sandbox below在下面提供我的代码片段和沙箱
https://codesandbox.io/s/61183rqp3w https://codesandbox.io/s/61183rqp3w
cssLabel: {
"&$cssFocused": {
color: purple[500],
fontSize: 14
}
},
cssFocused: {},
cssUnderline: {
"&:after": {
borderBottomColor: purple[500],
fontSize: 14
}
},
cssOutlinedInput: {
"&$cssFocused $notchedOutline": {
borderColor: purple[500],
fontSize: 14
}
},
notchedOutline: {},
In order to achieve your target, you must change the input styles properties in InputProps, as an example:为了实现您的目标,您必须更改 InputProps 中的输入样式属性,例如:
note: this will show ... if the placeholder overflow.注意:这将显示 ... 如果占位符溢出。
const styles = theme => ({
input: {
"&::placeholder": {
textOverflow: "ellipsis !important",
color: "blue",
fontSize: 14
}
}
});
and和
the component should be:该组件应该是:
<TextField
InputProps={{
classes: {
input: classes.input
}
}}
variant="outlined"
placeholder="Exp. XXXXXXXXXXXX"
/>
please find the code sandbox here: https://codesandbox.io/s/9j479w189y请在此处找到代码沙箱: https : //codesandbox.io/s/9j479w189y
for change the placeholder style you may use this code :要更改占位符样式,您可以使用以下代码:
::-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;
}
source: CSS-tricks来源: CSS 技巧
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.