html - 单击输入时隐藏文本框

Question

类似于 Bing.com 的搜索框，我想制作一个文本框，看起来文本框中有一个图像(即搜索引擎的放大镜)。意识到这是不可能的，我决定使用 CSS 使文本框不可见，并简单地在两者周围制作一个空白边框。这种方法的问题在于，当有人单击文本框时，它的轮廓无论如何都会出现，这使得隐藏它变得多余。

我怎样才能让它在被点击时，文本框现在会显示它自己的任何轮廓？

Answer 1

我觉得不同的浏览器有不同的方法。

到目前为止我测试过的是 chrome。

html:

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

CSS:

.noOutline {
   outline:none;
}