web-dev-qa-db-ja.com

プレースホルダーを入力するHTML5画像アイコン

次の図のように、入力プレースホルダーに画像アイコンを追加したいと思います。 enter image description here

これはプレースホルダーであるため、ユーザーが入力を開始すると、アイコンも消えます。

私は::-webkit-input-placeholderおよび::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 */
}
csshtml5cross-browserplaceholder
20
ecesena
  1. background-imageとして設定し、text-indentまたはpaddingを使用して、テキストを右にシフトできます。
  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

56
Tim S.

`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" />`
7
shumail rafique

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

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

それに合わせてスタイルを整えます。

0
Chris Pink
<html>
<head>
<style> 
input[type=text] {
    width: 50%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<p>Input with icon:</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>
0
user8034508

ティムの答えに追加：

  #search:placeholder-shown {
     // show background image, I like svg ????
     // when using svg, do not use HEX for colour; you can use rbg/a instead
     // also notice the single quotes
     background-image url('data:image/svg+xml; utf8, <svg>... <g fill="grey"...</svg>')
     // other background props
   }

   #search:not(:placeholder-shown) { background-image: none;}
0
Sylar