Css 怎么用？在搜索字段中缩进用户输入

当用户在search_字段中输入文本时，我希望它从右边的4个空格开始，这样文本就不会显示在框中搜索图标的上方/下方。我基本上希望我的search\u field\u标签能够像itunes搜索栏一样工作（当您键入图标右侧显示的文本时）。感谢您的帮助

必须修改搜索字段中的文本，因此此代码使其工作

所需CSS：

.search-query {
text-indent: 15px;
}

当前代码：

<%= form_tag users_path, :method => 'get', :class => "navbar-search" do %>
<%= search_field_tag :search, params[:search], placeholder: "    Find Members", :class => "search-query", :style => "width: 100px" %>
<div class="icon-search"></div>
<% end %>

---

根据需要使用css在文本区域添加填充

.navbar-search .icon-search {
position: absolute;
top: 4px;
left: 7px;
padding-left:20px; // this applies to only left and will start the text 20px away from the left side of textarea or input
}

---

将图标作为背景图像放置在.navbar搜索中，并在左侧添加填充以定位类型。见下文

   .navbar-search {
    padding-left: 25px; // set to any px* of choice
    background: <set background color> url('<path to an image(preferably .png)>') no-repeat 0 0;
   }

.navbar搜索{
左填充：25px；//设置为所选的任意px*
背景：url（“”）不重复0；
}

---

*搜索栏的剩余填充量将影响其宽度。

我无法正确确定您想要的填充量，但这是在

左侧填充：

或

文本缩进：

仍不起作用的情况下完成的。我只希望用户在我的文本_字段中的输入开始稍微向右。itunes就是这样做的。Twitter搜索栏也不允许文本点击图标，但他们的图标位于右侧。我需要两个以上的代表点，我可以上传图片仅供将来参考，当你发布预编译的代码时真的很令人沮丧。ASP代码没有帮助，显示打印到网页上的结果HTML，这就是神奇发生的地方。无论如何，谢谢我需要文本缩进我需要在文本框中的文本上填充，而不是文本字段本身我的答案上面什么都没做？出于某种原因，即使填充，文本起点也不会改变。有什么矛盾吗？

.search-query {
  text-indent: 15px;
}

.search-query {
  text-indent: 15px;
}