I am in a situation where the required placeholder text for an input field is too long for the width of the field. To solve this, I am trying to give the placeholder a smaller font-size
. It seems that no matter what I do, I cannot make the font-size
of the placeholder text different than the value text. I've tried throwing !important
on one, both, and neither with no luck.
My React code:
<input
type="text"
id="inputId"
name="inputName"
placeholder="A long string of text that does not fit"
onChange={props.handleChange}
value={props.someValue}
className={styles.myClass}
/>
My CSS:
.myClass {
font-size: 2em;
height: 66.8125px !important;
}
.myClass::-webkit-input-placeholder { /* WebKit browsers */
font-size: 1em;
}
.myClass:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-size: 1em;
}
.myClass::-moz-placeholder { /* Mozilla Firefox 19+ */
font-size: 1em;
}
.myClass:-ms-input-placeholder { /* Internet Explorer 10+ */
font-size: 1em;
}
Your placeholder font-size value is relative to the font-size of its containing element, so 1em is just going to be the same size as the font-size for the text input:
body {
font-size: 20px;
}
.myClass {
font-size: 2em; /* 2em -> body font-size * 2 -> 20px * 2 = 40px */
height: 66.8125px !important;
}
.myClass::-webkit-input-placeholder { /* WebKit browsers */
font-size: 1em; /* 1em -> input font-size * 1 -> 40px * 1 = 40px */
}
.myClass:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-size: 1em;
}
.myClass::-moz-placeholder { /* Mozilla Firefox 19+ */
font-size: 1em;
}
.myClass:-ms-input-placeholder { /* Internet Explorer 10+ */
font-size: 1em;
}
Setting the value to a fraction of 1 does the trick:
See fiddle
body {
font-size: 20px;
}
.myClass {
font-size: 2em;
height: 66.8125px !important;
}
.myClass::-webkit-input-placeholder { /* WebKit browsers */
font-size: 0.5em;
}
.myClass:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-size: 0.5em;
}
.myClass::-moz-placeholder { /* Mozilla Firefox 19+ */
font-size: 0.5em;
}
.myClass:-ms-input-placeholder { /* Internet Explorer 10+ */
font-size: 0.5em;
}
Give :placeholder-shown
a try:
input {
font-size: 2em;
height: 66.8125px !important;
width: 150px;
}
input:placeholder-shown {
font-size: 1em;
}
<input type="text" id="inputId" name="inputName" placeholder="A long string of text that does not fit" />
The :placeholder
pseudo-element is, effectively, a child of the input.
As such, 1em
will equal 2em
as that this is the inherited font-size.
1em is the same as 100% of the parent font-size
If you want the pseudo-element's font size to be half of the parent, use font-size:50%
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With