Search code examples
csspaddingplaceholdersearch-form

Padding for placeholder without changing the size of input

I do adaptive search form. Search field should take 100% width of the parent div (the width of the parent div will change depending on the resolution of the device). The button "Search" should always be at the right of the field, do not shift down.

A working version.

But there's a problem: The text "Search now" (placeholder) too close to the edge of the field and I can't move it to the right. In other examples, it moves by the set value for the field padding. But if I change the padding — field itself is shifted to the left, but I only need to move the text!

#searchfield {
   padding: 10px 0 13px 0; /* Try to change the left padding here! All field shifts to the left! But I need only shift the placeholder text to right! */
}
Solution

  • Try adding text-align:center for id searchfield or add box-sizing: border-box; declaration.

    try with any one of below examples, it will move the placeholder to right as you expected, these will support Ie lower versions too.

    Example1 (using box-sizing:border-box declaration)

    #searchfield {
     padding: 10px 0 13px 0px;
     box-sizing: border-box;
}

    Example2 (using text-align:center declaration)

    #searchfield {
      text-align:center;
}