Input placeholder cut off problems usually happen when an input has a fixed height, bad line-height, too much vertical padding, content-box sizing, or mobile font rules that make the placeholder taller than the field.
Form Input Fix
Why is my input placeholder cut off?
An input placeholder can look clipped at the top, chopped at the bottom, vertically off-center, or squeezed inside the field. This usually happens when the input height, padding, line-height, border, and font-size do not agree. The fix is to stop forcing the placeholder into a tiny box and give the input a safe, predictable sizing system.
- Input height
- Line-height
- Box sizing
- Mobile forms
What the bug looks like
The placeholder text looks chopped, vertically squeezed, too high, too low, or partially hidden inside the input.
Why it happens
The input is being forced into a height that does not match its text, padding, border, and line-height.
What usually fixes it
Use min-height, sane padding, line-height:1.35, box-sizing:border-box, and mobile-safe font sizes.
The input has a fixed height that is too small
A fixed height can work with one font size and break with another. If the input is too short for the placeholder text, the placeholder can look cut off or vertically cramped.
Broken code
Too short.form-input {
height: 32px;
font-size: 17px;
line-height: 32px;
padding: 0 14px;
}Broken visual result
The input height is too small for the placeholder style.
Correct code
Safe min-height.form-input {
min-height: 46px;
font-size: 16px;
line-height: 1.4;
padding: 12px 14px;
}Fixed visual result
The input gives the placeholder enough vertical space.
min-height instead of forcing text into a tiny fixed-height field.Vertical padding is larger than the input can handle
If an input has a fixed height and large top/bottom padding, the placeholder has almost no actual text area left. The result can look like the placeholder is cut off even when the font-size is normal.
Broken code
Padding fights height.form-input {
height: 42px;
padding: 16px 14px;
line-height: 1;
}Broken visual result
The padding consumes the input height.
Correct code
Balanced spacing.form-input {
min-height: 46px;
padding: 11px 14px;
line-height: 1.35;
}Fixed visual result
The placeholder sits comfortably inside the input.
box-sizing:content-box makes the input size harder to predict
With content-box, width and height apply only to the content area. Padding and borders are added on top. That can make form inputs taller, wider, or more cramped than you expect.
Broken code
Unpredictable box.form-input {
box-sizing: content-box;
height: 42px;
padding: 12px 18px;
border: 4px solid #cbd5e1;
}Broken visual result
Padding and border do not behave like part of the declared input size.
Correct code
Border-box input.form-input {
box-sizing: border-box;
width: 100%;
min-height: 46px;
padding: 11px 14px;
border: 1px solid #cbd5e1;
}Fixed visual result
The input size includes padding and border, making layout safer.
box-sizing:border-box makes form sizing more predictable and easier to maintain.Mobile font and input rules changed the placeholder size
Inputs often look fine on desktop and broken on mobile because a breakpoint changes height, padding, or font-size. Mobile browsers can also apply native input behavior that makes cramped fields look worse.
Broken code
Mobile field too small@media (max-width: 640px) {
.form-input {
height: 38px;
font-size: 13px;
padding: 7px 10px;
}
}Broken visual result
The mobile rule shrinks the input too aggressively.
Correct code
Mobile-safe input@media (max-width: 640px) {
.form-input {
min-height: 48px;
font-size: 16px;
line-height: 1.35;
padding: 12px 14px;
}
}Fixed visual result
The input remains comfortable and readable on mobile.
A production-minded input placeholder pattern
A reliable input pattern uses border-box sizing, a comfortable minimum height, balanced padding, readable font-size, and a normal line-height. That keeps placeholders from getting cut off across desktop and mobile.
Premium code
Stable form input system.form-field {
display: grid;
gap: 8px;
}
.form-label {
font-size: .85rem;
font-weight: 700;
}
.form-input {
box-sizing: border-box;
width: 100%;
min-height: 48px;
padding: 12px 14px;
border: 1px solid #cbd5e1;
border-radius: 14px;
font: inherit;
font-size: 16px;
line-height: 1.35;
}
.form-input::placeholder {
color: #94a3b8;
opacity: 1;
}
@media (max-width: 640px) {
.form-input {
min-height: 48px;
padding-inline: 14px;
}
}Premium visual result
The input system keeps placeholder text readable and vertically balanced.
Fast practical rule
If an input placeholder is cut off, remove the tiny fixed height first. Then use min-height, balanced padding, line-height:1.35, box-sizing:border-box, and a mobile-safe font size.
Debug checklist
- Inspect the input’s computed
height,line-height,padding, andfont-size. - Replace tiny fixed heights with a safer
min-height. - Use
line-height:1.35or another normal readable value. - Reduce vertical padding if the input has a fixed height.
- Set
box-sizing:border-boxso padding and border are included in the input size. - Check mobile breakpoints for smaller height or changed font-size.
- Use at least
font-size:16pxon mobile when possible for better readability and less browser zoom weirdness. - Test with real placeholder text, not only short words like “Email.”
min-height.
Final takeaway
An input placeholder cut off problem usually comes from a sizing mismatch. The input height, padding, font-size, line-height, border, and box-sizing are not working together.
Start by replacing fixed height with min-height, then balance padding and line-height. Once the input uses border-box sizing and mobile-safe font rules, the placeholder becomes predictable instead of clipped.