在我的html输入字段中，光标设置在中间。如何将光标设置在正确的位置？

Question

我仅使用HTML和CSS开发表单。我创建了带有圆角边框的输入字段。我需要将光标设置在输入字段的开头。

<input type="text" id="itemName" name="itemName" 
  style="border-radius: 4px; padding: 6px 236px;" 
  wrap="physical">

Answer 1

要将光标设置在右侧，请使用CSS的“方向”规则

input{
    direction: rtl;    
}

要设置偏移量，我们可以使用“文本缩进”规则

input{
    direction: rtl; 
    text-indent: 10px; // based on your border radius and input size you may change it
}

Answer 2

如果您希望网站上的所有文本/单词从右到左流动（如未从左到右书写的语言一样），请使用direction CSS属性。

但是，如果您只想更改输入字段中的光标位置，则需要使用text-align属性：

input {
  text-align: left;
}

如果有帮助，我会写一个代码示例：https://codepen.io/code-and-pixels/pen/gJNGaL