Search code examples
inputwebkitplaceholder

Webkit placeholder text jumps

I have an <input /> with a placeholder. The input is custom-designed, i. e. it has no borders, no outline, a custom height, custom width, custom background color, custom text color, and a custom font with a specific font-size and line-height. That font is imported using @font-face referencing a *.ttf-file.

The problem is that when focussing on the input field, the placeholder text jumps about 2-3px higher, only to jump back on blur.

Here the definition of the input field:

@font-face{
    font-family: SourceSansProExtraLight;
    src: url('../fonts/Source_Sans_Pro/SourceSansPro-ExtraLight.ttf');
}

#search_input{

    background-color: #f0f0f0;
    outline: none;
    border: none;
    padding: 0;
    margin: 0;

    width: 236px;
    padding-left: 12px;
    width: 224px; /* width (236) - padding-left */

    font-family: SourceSansProExtraLight;
    font-size: 30px;
    line-height: 30px;
    color: #5e5e5e;

    height: 52px;

}

Here's a GIF demonstrating the issue:

Placeholder Jump

Solution

  • Please check that you have write any css for input:focus Selector that may cause the issue. if you don't write any css for input:focus, write css for that to fix the problem.