如何？在搜索字段中縮進用戶輸入

當用戶在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

如何？在搜索字段中縮進用戶輸入

回答

相關問題