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を使用してテキストエリアにパディングを追加してください。

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