代码之家 › 专栏 › 技术社区 › JCollier

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

css html

-2

JCollier · 技术社区 · 5 年前

当我单击输入时,占位符文本保持不变(我希望它这样做),但当前显示的光标在文本顶部、中间的右侧闪烁,我希望它直接在文本左侧闪烁。我想保持占位符文本居中。我该怎么做?

这是我的领域:

<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;

1 回复 | 直到 5 年前

Joshua Robinson 5 年前

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

每个注释的更新代码:

我希望我的输入与你代码片段中的第一个相同, 唯一不同的是光标在居中文本

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