怎么样？在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

将图标作为背景图像放在.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;
   }

*给搜索栏留下的任何填充量都将影响其宽度。

Answer 3

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