Question

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

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

这是我的代码：

array[upper]

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

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

Answer 2

尝试一下。

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

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

输入的文本框太小

2 个答案: