如何在搜索栏输入中定位用户输入的内容？

Question

我正在为我的网站制作搜索栏。它在网站上的位置正确，样式正确，一切正常，我添加了一个占位符并 positioned/styled 它在搜索栏内，因为我喜欢它以适合我网站的其余部分。如果我在搜索栏内单击并写任何东西，所写的字母会出现在占位符的默认位置（搜索栏的中间），但我希望它们的位置不同（更靠左和靠下），就像占位符一样. The placeholder looks good 但是 typed-in text doesn't.

HTML 看起来像这样：

<input id="searchbar" type="text" placeholder="Suche..." />

搜索栏的样式如下：

#searchbar {
  grid-area: search;
  font-size: max(var(--ändern), 20px);
  font-family: var(--schriftart);
  background-color: var(--hintergrundfarbe);
  color: var(--schriftfarbe);
  border: solid 1px;
  border-radius: 0.75vw;
  border-color: var(--hintergrundfarbe);
  text-align: center;
  width: 15vw;
  height: max(2.5vw, calc(150px / 4));
  margin-left: 1.25vw;
  margin-top: 0.5vw;
  box-sizing: border-box;
}
input:focus {
  outline: none;
}

占位符的样式如下：

#searchbar::placeholder {
  color: var(--schriftfarbe);
  filter: opacity(0.5);
  position: absolute;
  left: 20px;
  top: auto;
  bottom: auto;
}

我尝试使用

#searchbar:focus {
  position: relative;
  left: 20px;
  top: auto;
  bottom: auto;
}

但它移动了整个搜索栏，而不仅仅是输入的内容。我也试过了

text-indent: 40px;

但似乎也没有任何改变。如果有人愿意帮助我，我会很高兴:)

Answer 1

尝试这样做：

#searchbar input[type=text]{
/*write your css here*/

  text-indent: 20px;
}

Answer 2

试试下面的代码。

:root {   
--hintergrundfarbe: rgb(182, 97, 22);   
--schriftfarbe: rgb(255, 234, 0);   
--schriftfarbe-hover: rgb(231, 181, 3);   
--schriftfarbe-active: white;   
--schriftart: Javanese Text;   
--überschriftart: Matura MT Script Capitals;   
--ändern: 1.25vw; }

#searchbar {
  grid-area: search;
  font-size: max(var(--ändern), 20px);
  font-family: var(--schriftart);
  background-color: var(--hintergrundfarbe);
  color: var(--schriftfarbe);
  border: solid 1px;
  border-radius: 0.75vw;
  border-color: var(--hintergrundfarbe);
  width: 15vw;
  height: max(2.5vw, calc(150px / 4));
  margin-left: 1.25vw;
  margin-top: 0.5vw;
  box-sizing: border-box;
  padding-left:20px;
  padding-top:10px;
}

input:focus {
  outline: none;
}

#searchbar::placeholder {
  color: var(--schriftfarbe);
  filter: opacity(0.5);
}

<input id="searchbar" type="text" placeholder="Suche..." />

Answer 3

从外观上看，它可能是您的 font-family。尝试使用不同的字体（例如 Arial）进行测试。

font-family: Arial, sans-serif;

如何在搜索栏输入中定位用户输入的内容？

How to position user typed-in content in search bar input?

html

css

placeholder

searchbar