如何？在搜索字段中缩进用户输入

当用户在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;

Search Bar Search with problem

来源

2012-12-18 Jaqx

我不能正确辨认出您想要的，但这与'要么填充左做：'或'TEXT-INDENT：' – Andy

仍然没有工作。我只想在我的text_field中的用户输入开始一点点的权利。 iTunes做到了这一点。 Twitter搜索栏也不会让文本碰到图标，但他们的权利。我需要两个重点，我可以上传图片 – Jaqx

现在上传它们！ –

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

来源

2013-02-12 07:55:30 Jaqx

添加填充在您的textarea使用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 
}

来源

2012-12-18 10:30:13

我需要填充文本框内的文本而不是text_field本身 – Jaqx

我的答案上面没有什么？ –

由于某些原因，即使使用填充文本的起始点也不会改变。有什么矛盾？ – Jaqx

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

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

*填充左侧的数量会给搜索栏带来什么影响它的宽度。

来源

2012-12-18 14:37:51 Pais

如何？在搜索字段中缩进用户输入

回答

相关问题