实现 input框前有固定文字并且文字焦点向右对齐

作者：System 时间：2024年08月07日分类：所有,css3 字数：529

这篇文章距离上次修改已过206天，其中的内容可能已经有所变动。

要实现在input框前有固定文字且文字焦点向右对齐，可以使用HTML和CSS来完成。你可以使用一个span标签来包裹固定文字，并将input放在span之后。然后使用CSS将input向右对齐。

以下是实现这个需求的示例代码：

HTML:




<label for="myInput">用户名:</label>
<span>用户名: </span><input type="text" id="myInput" />

CSS:




span {
  user-select: none; /* 防止用户选中文本 */
}
 
input {
  margin-left: 5px; /* 输入框距离左侧固定文字的距离 */
  vertical-align: middle; /* 垂直居中对齐 */
}

这段代码中，<label> 标签用于提供点击反馈，并将焦点移动到对应的输入框。<span> 包裹固定文字，并使用CSS样式防止用户选中文本。<input> 类型为text，并设置了左边距，以便当文字聚焦时，输入框的左边缘与固定文字的右边缘对齐。