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

Question

我正在为.io游戏中的玩家建立一个昵称系统，我试图将输入框的占位符文本垂直放置在中心位置，并且完全可见，这与垂直放置在中心位置不同隔断。另外，如何使字体变细？我已经尝试过使用“文本权重：1像素”，但没有用。

我的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>

页面截图：

Answer 1

尝试将输入框的行高设置为与输入框的高度相同，以使文本垂直居中，也请尝试在px而非{{1}中设置输入框的高度}

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

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

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

希望有帮助

Answer 2

你好，奥古斯丁·埃塞纳布卢，

1. 字体粗细属性将支持从100到900的100的倍数，并且这些值定义字体粗细的从细到粗（100较轻，900为最粗）。支持此属性的其他值为Normal，Bold，Bolder，Lighter。但这不会带来太大影响，也不会为您提供所需的字体。我建议您使用网站使用的较浅字体。 例如：如果您将Arial用作网站的字体系列，则将Arial-light用作占位符。

2. 为使占位符垂直居中对齐，可以为输入字段添加填充。 例如：在您的情况下，以下值将解决问题： 填充：3px 10px 0 10px;

希望这会有所帮助：）