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

【问题标题】：How to position user typed-in content in search bar input?如何在搜索栏输入中定位用户输入的内容？
【发布时间】：2022-03-10 16:23:52
【问题描述】：

我正在为我的网站制作搜索栏。它在网站上正确定位，它的样式和一切工作正常，我添加了一个占位符并在搜索栏中定位/设置它，因为我喜欢它以适应我的网站的其余部分。如果我在搜索栏内单击并写任何内容，所写的字母会出现在占位符的默认位置（搜索栏的中间），但我希望它们的位置不同（更靠左和靠下），就像占位符一样. 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;

但似乎也没有改变任何东西。我会为任何试图帮助我的人感到高兴:)

【问题讨论】：

请添加您使用的变量。
当然，它的'：: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; }

标签： html css placeholder searchbar

【解决方案1】：

从外观上看，它可能是您的字体系列。尝试使用 Arial 等不同的字体进行测试。

font-family: Arial, sans-serif;

【讨论】：

是的，输入字段好像不支持，谢谢

【解决方案2】：

尝试这样做：

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

  text-indent: 20px;
}

【讨论】：

不，抱歉，它不会改变任何东西

【解决方案3】：

试试下面的代码。

: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);
}

&lt;input id="searchbar" type="text" placeholder="Suche..." /&gt;

【讨论】：