検索テキストは、テキスト入力htmlの検索アイコンを非表示にします

サム

検索アイコンが入ったテキスト入力があります。テキストボックスの文字がその長さを超えると、検索アイコンが非表示になります。どうすれば隠れないようにできますか。

この画像を見る

以下はコードです-

         <div class="mainClass">
                <input type="text" placeholder="Search names"/>
                <img src="Content/Search.png" class="imageClass"/>
            </div>
        </form>
    </body>
    </html>

    <style>
        .mainClass{
            float:right;
        }
        .imageClass{
            width:10px;
            height:10px;
            margin-left:-10%;
        }
    </style>

前もって感謝します。!

ゴータムナイク

入力にパディング権を追加しますこれにより、アイコン用のスペースが提供されます

input {
  padding-right: 20px;
}

.mainClass {
  float: right;
}

.imageClass {
  width: 10px;
  height: 10px;
  margin-left: -10%;
}

input {
  padding-right: 20px;
}
<div class="mainClass">
  <input type="text" placeholder="Search names" />
  <img src="https://placehold.it/150x150" class="imageClass" />
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

jQueryはテキストを検索し、そのテキストを非表示にします

分類Dev

検索入力JQueryのテキストを強調表示します

分類Dev

入力テキストの右側に検索ボタンを表示する

分類Dev

検索テキスト入力を使用して画面にアイテムを表示する方法(expo、react-native)

分類Dev

テキスト入力検索を使用してリンクをフィルタリングし、一致しないものを非表示にします

分類Dev

QWebViewは非表示の要素内のテキストを検索します

分類Dev

HTML 要素内のテキストを検索し、リンク付きのアイコン (gylphicon) を追加します

分類Dev

アイコンからのポリマー検索入力テキスト

分類Dev

テキスト入力に検索ボタンを追加する

分類Dev

テキスト入力でリンクを検索し、angularjsでhtmlリンクに変換します

分類Dev

Monacoエディター-検索コントロールにテキストを事前入力します

分類Dev

Seleniumを使用してGoogleに検索テキストを入力します

分類Dev

ファイル内のテキストを検索し、その後にテキストを挿入します

分類Dev

AndroidのSearchViewアイテムの検索アイコンとテキストの色を変更します

分類Dev

制約を追加した後、UISearchbarスコープは検索テキストゾーンの背後に非表示になります

分類Dev

指定された検索入力からすべての検索テキストを取得します

分類Dev

ファイル/入力、コンテキスト依存検索で文字列パターンを検索(grepとは異なります)

分類Dev

属性が必要な空白の値を持つ最初の表示された入力テキストを検索します

分類Dev

検索ボックスに入力されたテキストを使用してdivコンテンツを検索する

分類Dev

JTextfield を介して入力された Jtable 内のテキストを検索用に強調表示する方法

分類Dev

入力テキストがクリアされたときにajax検索結果を非表示にするにはどうすればよいですか?

分類Dev

テキストが一致するコードファイルのPowershell検索ディレクトリは、txtファイルを入力します

分類Dev

検索テキストボックスのクリアは、jqueryajaxを使用してhtmlテーブルにすべてのデータを表示します

分類Dev

テキスト入力部分を右から左にスライドさせる検索アニメーションを作成します

分類Dev

Golandは、グローバル検索バーにテキストを自動的に入力します

分類Dev

DataTablesは、検索入力と行数のドロップダウンリストを非表示にします

分類Dev

検索バーのテキストを削除し、検索前に表示に戻ります。迅速

分類Dev

PHP は、検索用のテキスト入力からの省略形で住所を解析します

分類Dev

VBAは最初の空のセルと入力テキストを検索します

Related 関連記事

  1. 1

    jQueryはテキストを検索し、そのテキストを非表示にします

  2. 2

    検索入力JQueryのテキストを強調表示します

  3. 3

    入力テキストの右側に検索ボタンを表示する

  4. 4

    検索テキスト入力を使用して画面にアイテムを表示する方法(expo、react-native)

  5. 5

    テキスト入力検索を使用してリンクをフィルタリングし、一致しないものを非表示にします

  6. 6

    QWebViewは非表示の要素内のテキストを検索します

  7. 7

    HTML 要素内のテキストを検索し、リンク付きのアイコン (gylphicon) を追加します

  8. 8

    アイコンからのポリマー検索入力テキスト

  9. 9

    テキスト入力に検索ボタンを追加する

  10. 10

    テキスト入力でリンクを検索し、angularjsでhtmlリンクに変換します

  11. 11

    Monacoエディター-検索コントロールにテキストを事前入力します

  12. 12

    Seleniumを使用してGoogleに検索テキストを入力します

  13. 13

    ファイル内のテキストを検索し、その後にテキストを挿入します

  14. 14

    AndroidのSearchViewアイテムの検索アイコンとテキストの色を変更します

  15. 15

    制約を追加した後、UISearchbarスコープは検索テキストゾーンの背後に非表示になります

  16. 16

    指定された検索入力からすべての検索テキストを取得します

  17. 17

    ファイル/入力、コンテキスト依存検索で文字列パターンを検索(grepとは異なります)

  18. 18

    属性が必要な空白の値を持つ最初の表示された入力テキストを検索します

  19. 19

    検索ボックスに入力されたテキストを使用してdivコンテンツを検索する

  20. 20

    JTextfield を介して入力された Jtable 内のテキストを検索用に強調表示する方法

  21. 21

    入力テキストがクリアされたときにajax検索結果を非表示にするにはどうすればよいですか?

  22. 22

    テキストが一致するコードファイルのPowershell検索ディレクトリは、txtファイルを入力します

  23. 23

    検索テキストボックスのクリアは、jqueryajaxを使用してhtmlテーブルにすべてのデータを表示します

  24. 24

    テキスト入力部分を右から左にスライドさせる検索アニメーションを作成します

  25. 25

    Golandは、グローバル検索バーにテキストを自動的に入力します

  26. 26

    DataTablesは、検索入力と行数のドロップダウンリストを非表示にします

  27. 27

    検索バーのテキストを削除し、検索前に表示に戻ります。迅速

  28. 28

    PHP は、検索用のテキスト入力からの省略形で住所を解析します

  29. 29

    VBAは最初の空のセルと入力テキストを検索します

ホットタグ

アーカイブ