css - 如何？在 search_field 中缩进用户输入

Question

当用户在 search_field 中输入文本时，我希望它从右侧开始 4 个空格，以便文本不会显示在框中的搜索图标上方/下方。我基本上希望我的 search_field_tag 像 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;

Answer 1

根据需要使用 css 在 textarea 中添加填充！

.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
}

Answer 2

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

Answer 3

将图标作为背景图像放在 .navbar-search 中并添加 padding-left 以定位类型。见下文。

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

* 为搜索栏提供多少 padding-left 将影响其宽度。