9

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;
}
1

3 Answers 3

12

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;
} 
5

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" />

1
  • thanks this the the most appropriate answer. Commented May 4, 2021 at 6:40
4

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%.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.