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;
}
em
units. I changed topx
and it does work -> jsfiddle.net/dbagu2n7/1.