Search code examples
javascripthtmlcsscenterplaceholder

Caret appear at end of placeholder onfocus when text-align is centered

This isn't super important, I worked around it fairly easily by adding:

 onfocus="this.placeholder = '';" onblur="this.placeholder = 'Search...';"

However, just out of curiousity how would this be done? Here is the fiddle: https://jsfiddle.net/vjLvssmp/

is there a way in CSS or would it require JS?

Thanks, John

Solution

  • --EDIT

    You can do it by using text-indent and placeholder selector.

    .whitesearch {
  ...
  text-indent: 45px;
}

.whitesearch::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  text-indent: 0px;
}

    Here's an example. https://jsfiddle.net/nonyok0q/3/