html - 输入的文本框太小

Question

我正在尝试制作一个搜索文本输入框，其中输入文本的大小、字体和样式与占位符相同。

在互联网上搜索几乎没有找到正确的方向。

这是我的代码:

::placeholder {
	color: rgba(255, 255, 255, 0.8);
	font-family: Moon;
	font-size: 20px;
	padding-left: 5%;
}

<input type="text" placeholder="Search..." name="searchInput" id="searchBar"><br />

https://imgur.com/a/ct4TxxT

当您继续键入文本时，它应该与占位符具有相同的样式。

Answer 1

这是一个最小的例子，所有的属性都必须添加到input，并且只为placeholder设置颜色。

input {
  background: black;
  color: rgba(255, 255, 255, 0.8);
  font-family: Courier;
  font-size: 20px;
  padding-left: 5%;
  padding-top: 2%;
  padding-bottom: 2%;
}

::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: rgba(255, 255, 255, 0.8);
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: rgba(255, 255, 255, 0.8);
  opacity: 1;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: rgba(255, 255, 255, 0.8);
  opacity: 1;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgba(255, 255, 255, 0.8);
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: rgba(255, 255, 255, 0.8);
}

::placeholder {
  /* Most modern browsers support this now. */
  color: rgba(255, 255, 255, 0.8);
}

<input type="text" placeholder="Search..." name="searchInput" id="searchBar">