Placeholder Font-Size Bigger Than 16Px

Placeholder font-size bigger than 16px

The input and its placeholder must have matching font styles

input {
    display: block;
    width: 400px;
    padding: 0 20px;
}

input,
input::placeholder {
    font: 20px/3 sans-serif;
}

<input type="text" placeholder="Example Input">

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

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

How to change placeholder's font-size but don't change the value's font-size in input by CSS?

Check this answer:

::-webkit-input-placeholder { font-size: 16px; }::-moz-placeholder { font-size: 16px; } /* firefox 19+ */:-ms-input-placeholder { font-size: 16px; } /* ie */input:-moz-placeholder { font-size: 16px; }
input {font-size:8px;height:30px;width:50%;text-indent:10px;}

<input type="text" name="name"  placeholder="Enter the name" />

CSS. Placeholder and textbox with different font sizes

I think you need to add input before your pseudo element. Try this:

input::-webkit-input-placeholder {
  font-size: 18px;
  vertical-align: middle;
  line-height: 100px;
  color: #000;
  text-align: center;
}

input::-moz-placeholder {
  font-size: 18px;
  vertical-align: middle;
  line-height: 100px;
  color: #000;
  text-align: center;
}

input:-ms-input-placeholder {
  font-size: 18px;
  vertical-align: middle;
  line-height: 100px;
  color: #000;
  text-align: center;
}

input::placeholder {
  font-size: 18px;
  vertical-align: middle;
  line-height: 100px;
  color: #000;
  text-align: center;
}

EDIT

Styling placeholders seems limited. But a way to do it might be to use transform: translate(0, -50%);

input::placeholder {
  font-size: 18px;
  line-height: 100px;
  text-align: center;
  transform: translate(0, -50%);
}

Input's placeholder misaligned in Chrome when input and placeholder have different font size

This seems like buggy behaviour by Chrome, the placeholder is aligned vertically with the baseline of the larger font size in the input.

In order to correctly vertically center the smaller placeholder text in Chrome, you can use position: relative and top: -5px as a workaround.

Workaround

body {  padding: 20px;}input {  padding: 0 10px;  color: green;  font-size: 30px;  height: 57px;}input::-webkit-input-placeholder {  color: blue;  font-size: 14px;  position: relative;  top: -5px;}input::-moz-placeholder {  color: blue;  font-size: 14px;}

<input type="text" value="" placeholder="Placeholder text">

How to change Searchbar's Placeholder font and size in iOS13

Swift 5:

 if let textfield = searchBar.value(forKey: "searchField") as? UITextField {
                let atrString = NSAttributedString(string: "Search",
                                                   attributes: [.foregroundColor : color,
                                                                .font : UIFont.systemFont(ofSize: 10, weight: .bold)])
                textfield.attributedPlaceholder = atrString

            }

Placeholder Font-Size Bigger Than 16Px