如何编辑输入框的占位符文本？答案

【问题标题】：How do I edit the placeholder text of an input box?如何编辑输入框的占位符文本？
【发布时间】：2020-10-12 02:21:19
【问题描述】：

我正在为我的 .io 游戏中的玩家设置一个昵称系统，我正在尝试将我的输入框的占位符文本垂直放在中心并且完全可见，这与它不在垂直中心并且它正在隔断。还有怎么让字体变细？我已经尝试过使用“text-weight: 1px”，但没有成功。

我的 CSS

#nickname {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 40%;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  width: 30%;
  height: 8%;
  outline: none;
}

input::placeholder {
  color: rgb(184, 184, 184);
  font-size: 20px;
  font-style: normal;
  font-weight: 1px;
}

<div>
  <form align="center">
    <label id='spawnif'>(press enter to spawn)</label>
    <input id='nickname' placeholder="Nickname">
  </form>
</div>

页面截图：

【问题讨论】：

标签： html css input placeholder

【解决方案1】：

尝试将输入框的行高设置为与输入框的高度相同，使文本垂直居中，也尝试将输入框的高度设置为px而不是%

要使占位符变薄，请在输入框上设置font-weight，因为占位符将继承相同的属性。同样在您的代码集font-weight 中将值更正为 1px 不是正确的字体粗细。

还要确保输入框的font-size总是小于框的高度，否则会从底部切掉。

#nickname {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 40%;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  width: 30%;
  height: 20px;
  font-size:16px;
  line-height:20px;
  outline: none;
  font-weight:300; /* to make text thinner, make sure your font-family supports this font weight.*/
}

/* ::placeholder selector with vendor prefixes for diff browers */
input::-webkit-input-placeholder {
  color: rgb(184, 184, 184);
  opacity:1;
}
input::-moz-placeholder {
  color: rgb(184, 184, 184);
  opacity:1;
}
input:-ms-input-placeholder {
  color: rgb(184, 184, 184);
  opacity:1;
}
input::-ms-input-placeholder {
  color: rgb(184, 184, 184);
  opacity:1;
}
input::placeholder {
  color: rgb(184, 184, 184);
  opacity:1;
}

<div>
  <form align="center">
    <label id='spawnif'>(press enter to spawn)</label>
    <input id='nickname' placeholder="Nickname">
  </form>
</div>

希望对你有帮助

【讨论】：

【解决方案2】：

你好奥古斯丁·埃塞纳巴鲁，

字体粗细属性将支持从 100 到 900 的 100 倍数的值，这些值定义了从细到粗的字体粗细（100 更轻，900 最粗）。支持此属性的其他值是 Normal、Bold、Bolder、Lighter。但这不会产生太大影响，也不会为您提供所需的字体。我建议您使用您在网站上使用的字体较轻的字体。例如：如果您使用 Arial 作为您网站的字体系列，则使用 Arial-light 作为占位符。
为了使占位符垂直居中对齐，您可以为输入字段添加填充。例如：在您的情况下，以下值将解决问题： 填充：3px 10px 0 10px;

希望这会有所帮助:)

【讨论】：