带输入的文本框太小答案

【问题标题】：Textbox with input is too small带输入的文本框太小
【发布时间】：2019-12-11 21:53:38
【问题描述】：

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

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

这是我的代码：

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

&lt;input type="text" placeholder="Search..." name="searchInput" id="searchBar"&gt;&lt;br /&gt;

https://imgur.com/a/ct4TxxT

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

【问题讨论】：

标签： html css

【解决方案1】：

试试这个。

#searchBar {
  color: rgba(255, 255, 255, 0.8);
  font-family: Moon;
  font-size: 20px;
  padding: 0 0 0 5%;

  background:transparent;
  border:0;
  outline: none;
  border:1px solid white;
  border-radius:20px;
}
#searchBar::placeholder {
  color:inherit;
}
body {
  background:#4267b2;
}

&lt;input type="text" placeholder="Search..." name="searchInput" id="searchBar"&gt;

【讨论】：

这是使用div来模拟占位符，当用户退格输入的内容为空时会发生什么？占位符文本是否显示？
@AnuragSrivastava 好点。我编辑了我的答案并为你的答案投票。

【解决方案2】：

这是一个最小的例子，所有属性都必须添加到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);
}

&lt;input type="text" placeholder="Search..." name="searchInput" id="searchBar"&gt;

【讨论】：