Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make input placeholder font-size different from input value font-size

Tags:

html

css

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;
}
like image 228
Phil Mok Avatar asked Jun 21 '17 14:06

Phil Mok


Video Answer


3 Answers

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;
} 
like image 118
olgark Avatar answered Sep 16 '22 12:09

olgark


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" />
like image 41
Huelfe Avatar answered Sep 20 '22 12:09

Huelfe


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

like image 28
Paulie_D Avatar answered Sep 17 '22 12:09

Paulie_D