时间戳

首页 > 解决方案 > 带输入的文本框太小

html - 带输入的文本框太小

问题描述

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

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

这是我的代码：

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

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

标签： htmlcss

解决方案

这是一个最小的示例，必须将所有属性添加到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">

推荐阅读