Html 单击要键入的文本框时隐藏该文本框

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

---

如何使文本框在单击时显示其自身的任何轮廓？

我认为对于不同的浏览器有不同的方式

到目前为止，我测试的是chrome

html:

---

我认为不同的浏览器有不同的方式

到目前为止，我测试的是chrome

html:

---

不管怎样，这在很多浏览器上都会发生，当框处于

焦点时就会出现。不过，我不知道如何阻止这种情况；这似乎是一个特定于浏览器的东西，而不是你可以用css改变的东西。你有没有检查Bing的代码，看看他们是如何做到的？否则，请提供所需内容的图片。您是否尝试过在css中设置
大纲：0
？不管怎样，这在许多浏览器上都会发生，当框处于
焦点时会出现。不过，我不知道如何阻止这种情况；这似乎是一个特定于浏览器的东西，而不是你可以用css改变的东西。你有没有检查Bing的代码，看看他们是如何做到的？否则，请提供所需内容的图片。您是否尝试过在css中设置
outline:0
？
<input class="noOutline" type="text" />

.noOutline {
   outline:none;
}