23

次の図のように、入力プレースホルダーに画像アイコンを追加したいと思います。 ここに画像の説明を入力してください

これはプレースホルダーであるため、ユーザーが入力を開始するとアイコンも非表示になることに注意してください。

::-webkit-input-placeholderとを使用したWebkit（Safari + Chrome）用の次のソリューションが付属しています::before。残念ながら、mozillaへの簡単なアプリケーションは機能しないようです。

だから私の質問は：入力プレースホルダーに画像アイコンを追加するためのクロスブラウザーソリューションはありますか？

Webkitのソリューション：

#myinput::-webkit-input-placeholder::before { 
    content: ' ';
    position: absolute;
    top: 2px; /* adjust icon position */
    left: 0px;
    width: 14px; /* size of a single icon */
    height: 14px;
    background-image: url("/path/to/icons.png"); /* all icons in a single file */
    background-repeat: no-repeat;
    background-position: -48px 0px; /* position of the right icon */
}
4

5 に答える 5

59
  1. として設定し、またはbackground-imageを使用してテキストを右にシフトできます。text-indentpadding
  2. 2 つの要素に分けることができます。

正直なところ、適切なフォールバックがなければHTML5/CSS3 の使用は避けたいと思います。古いブラウザーを使用していて、新しい機能をすべてサポートしていない人が多すぎます。残念ながら、フォールバックを削除するにはしばらく時間がかかります:(

最初に述べた方法は、最も安全で簡単です。どちらの方法でも、Javascript でアイコンを非表示にする必要があります。

CSS:

input#search {
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    text-indent: 20px;
}

HTML:

<input type="text" id="search" name="search" onchange="hideIcon(this);" value="search" />

Javascript:

function hideIcon(self) {
    self.style.backgroundImage = 'none';
}

2013 年 9 月 25 日

「どちらの方法でもアイコンを非表示にするには JavaScript が必要です」と言ったとは信じられません。これは完全に真実ではないからです。

この回答で示唆されているように、プレースホルダー テキストを非表示にする最も一般的なタイミングは変更時です。activeただし、アイコンの場合は、CSS で疑似クラスを使用して実行できるフォーカス時にアイコンを非表示にしても問題ありません。

#search:active { background-image: none; }

なんと、CSS3 を使用すると、フェードアウトさせることができます。

http://jsfiddle.net/2tTxE/

2013 年 11 月 5 日

もちろん、CSS3 ::before 疑似要素もあります。ただし、ブラウザのサポートには注意してください。

            Chrome  Firefox     IE      Opera   Safari
:before     (yes)   1.0         8.0     4       4.0
::before    (yes)   1.5         9.0     7       4.0

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

于 2012-12-07T10:58:35.470 に答える
9

`CSS:

input#search{
 background-image: url(bg.jpg);
 background-repeat: no-repeat;
 text-indent: 20px;
}

input#search:focus{
 background-image:none;
}

HTML:

<input type="text" id="search" name="search" value="search" />`
于 2016-01-21T15:58:37.373 に答える
0

時間が経つにつれて、より良い答えがあるかどうかはわかりませんが、これは簡単で機能します。

input[type='email'] {
  background: white url(images/mail.svg) no-repeat ;
}
input[type='email']:focus {
  background-image: none;
}

似合うようにスタイリングしてください。

于 2017-07-03T15:17:24.450 に答える