CODEWITHSUNDEEP
htmlcsspaddingplaceholderinput-field
SUM1
SUM1

Reputation: 811

HTML input field placeholder text cut off at the end

I have an HTML input form with a field with placeholder text that gets cut off at the end, beyond the padding.

enter image description here

I can't locate what's causing it.

Upvotes: 1

Views: 2718

Answers (2)

Shraddha
Shraddha

Reputation: 884

You can also make use of text-overflow: ellipsis;. The text-overflow CSS property sets how hidden overflow content is showed to users. It can be clipped, display an ellipsis ('…'), or display a custom string. You can refer to the kink below to see an example:

text-overflow in textbox

Upvotes: 0

SUM1
SUM1

Reputation: 811

Answering my own question. It turns out it is not caused by any of my custom CSS:

enter image description here

It turns out it is caused by the Chrome "X" button in the input field:

enter image description here

The only way to remove this is to add the experimental CSS pseudo-element ::-webkit-search-cancel-button and set its display to none. I won't be doing this though.

::-webkit-search-cancel-button {
    display: none;
}

Sharing this to help anyone else.

Upvotes: 2

Related Questions