如何在占位符后的搜索字段中 position cursor

Question

I am using Vue for a small app and I have an input type search. The problem is that the cursor is displayed in the beginning of the input, but I want it to be displayed after the placeholder text. How can I achieve this?

Here is my code:

 .search { height: 36px; width: 256px; margin-right: 42px; border: 1px solid #76b1c5; box-sizing: border-box; border-radius: 18px; }

 <input type="search" name="" id="" class="search" placeholder="search" />

and my CSS:

.search {
  height: 36px;
  width: 256px;
  margin-right: 42px;
  border: 1px solid #76b1c5;
  box-sizing: border-box;
  border-radius: 18px;
}

Answer 1

You cannot do this given your current setup.

The reason being that the cursor appears at the same place that the placeholder text starts. So, no matter how you alter the placeholder text, or the cursor, they will always begin at the same place.

If you wish to disconnect the cursor from the placeholder text, then you will need to create separate elements in order to accomplish that. For example, using a label, or a div, or a span, or some combination of elements to have the text out of the flow of the document in order for it to be removable and separate from altering the layout. In addition, this would mean implementing the placeholder logic, or leaving the placeholder in place as a label.