Question

当我单击输入时，占位符文本保持不变（我希望这样做），但是出现的光标当前在文本顶部闪烁，在中间居中，我希望它闪烁直接在文本的左侧。我想使占位符文本居中。我该怎么办？

这是我的领域：

sig.sa_action

这是我所有的CSS：

<input type="email" name="email" placeholder="enter your email...">

Answer 1

可能发生的是将文本对齐中心应用于输入。确保将文本对齐方式设置为左对齐或完全不设置为左对齐。

每个注释的更新代码：

我希望输入的内容与您的代码段中的第一个相同，唯一的区别是光标在居中文字

使用纯CSS做到这一点的唯一方法是用另一个元素来模仿占位符。尽管在输入获得焦点时隐藏了占位符，但这具有副作用。

.parent {
  position: relative;
  max-width: 200px;
}
#first-input {
  text-align: left;
  position: relative;
  z-index: 1;
  background-color: transparent;
  width: 100%;
}
#first-input:focus + .placeholder {
  display: none;
}
.placeholder {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  font-size: 13px;
  width: 100%;
  height: 100%;
  text-align: center;
}

<div class="parent">
  <input id="first-input" type="text"/>
  <div class="placeholder">Type something..</div>
</div>

将HTML输入标签光标放在占位符文本的左侧

1 个答案: