Caret появляется в конце заполнителя ONFOCUS, когда выравнивание текста по центру

Question

Это не супер важно, я работал вокруг него довольно легко, добавив:

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

Однако, просто из любопытства, как бы это сделать ? Вот сценарий: https://jsfiddle.net/vjLvssmp/

Есть ли способ в CSS или он потребует JS?

Спасибо, Джон

Answer 1

--edit

Вы можете сделать это с помощью текст-отступов и заполнитель селектора.

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

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

Вот пример. https://jsfiddle.net/nonyok0q/3/