Hiding Text-Box When It Is Clicked To Be Typed In

Similar to Bing.com's search box, I wanted to make a text box where it looked like there was an image in the text box (i.e. 开发者_如何学Pythonmagnifying glass for search engines). Realizing that this is not possible, I decided to make the textbox invisible using CSS, and simply making a blank border around the two. The problem with this approach is that when someone clicks the textbox, an outline of it appears anyway, making hiding it redundant.

How can I make it so that when clicked, the text-box will now show any outline of itself?

I think there are different ways for different browsers.

What i tested so far and it works is with chrome.

html:

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

css:

.noOutline {
   outline:none;
}