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

Question

当我点击输入时，占位符文本保留(我希望它这样做)，但出现的光标当前在文本顶部闪烁，就在中心，我希望它闪烁直接在文本的左侧。我想让占位符文本居中。我该怎么做？

这是我的领域:

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

这是我所有的 CSS:

background-color:rgb(255, 255, 255);
border-bottom-color:rgb(255, 255, 255);
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border-bottom-style:solid;
border-bottom-width:1px;
border-image-outset:0px;
border-image-repeat:stretch;
border-image-slice:100%;
border-image-source:none;
border-image-width:1;
border-left-color:rgb(255, 255, 255);
border-left-style:solid;
border-left-width:1px;
border-right-color:rgb(255, 255, 255);
border-right-style:solid;
border-right-width:1px;
border-top-color:rgb(255, 255, 255);
border-top-left-radius:0px;
border-top-right-radius:0px;
border-top-style:solid;
border-top-width:1px;
box-sizing:border-box;
color:rgb(0, 0, 0);
cursor:text;
display:inline-block;
font-family:azo-sans-web, sans-serif;
font-size:16px;
font-stretch:100%;
font-style:normal;
font-variant-caps:normal;
font-variant-east-asian:normal;
font-variant-ligatures:normal;
font-variant-numeric:normal;
font-weight:400;
height:72px;
letter-spacing:0.56px;
line-height:22.8571px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
outline-color:rgb(0, 0, 0);
outline-style:none;
outline-width:0px;
padding-bottom:24px;
padding-left:24px;
padding-right:24px;
padding-top:24px;
text-align:center;
text-indent:0px;
text-rendering:auto;
text-shadow:none;
text-transform:none;
width:702px;
word-spacing:0px;
writing-mode:horizontal-tb;
-webkit-appearance:none;
-webkit-box-direction:normal;
-webkit-rtl-ordering:logical;
-webkit-border-image:none;

Answer 1

可能发生的情况是将文本对齐居中应用于输入。确保文本对齐设置为左对齐或根本不设置为默认左对齐。

每条评论的更新代码:

I want my input to be the same as the first one in your code snippet, with the only difference being the cursor is to the left of the centered text

用纯 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>