入力時にテキストボックスを隠す場合

Question

Bing.comの検索ボックスと同様に、テキストボックスに画像があるように見えるテキストボックス（検索エンジン用の拡大鏡など）を作成したかったのですが、 。これが不可能であることを認識し、CSSを使用してテキストボックスを非表示にし、単に2つの空白の枠線を作成することにしました。このアプローチの問題は、誰かがテキストボックスをクリックしたときに、そのテキストボックスの概要がとにかく表示され、それを冗長に隠すことです。

クリックすると、テキストボックスにそれ自体のアウトラインが表示されるようにするにはどうすればよいですか？

Answer 1

私は、さまざまなブラウザに異なる方法があると思います。

私がこれまでにテストしたのはクロムです。

HTML：

<input class="noOutline" type="text" /> 

CSS：ボックスは `上focused`とき

.noOutline { 
    outline:none; 
}