How do I disable the highlight border on an html input text element

Question

<input type="text" name="user" class="middle" id="user" tabindex="1" />

Basic text input in html, when you tab or focus into it, Safari will put a blurry blue border around it. For the layout I am working on, this is distracting and does not look right.

FireFox does not seem to do this, or at least, will let me control it with border: x;

If someone can tell me how IE performs, I would be curious, but getting Safari to remove this little bit of flare would be nice.

Thanks

Answer 1

Unfortunately I don't have Safari, but you could try through CSS. A quick test would be to do:

<input type="text" name="user" class="middle" id="user" tabindex="1" style="border: none" />

Of course, you really should put all CSS into a proper external CSS file to separate markup and style...

Answer 2

Try:

input.middle:focus {
  outline-width:0;
}

Answer 3

This disables the on-focus outline for both safari and chrome, since they're both webkit based.

xoxo Luna

Edit: What Cory said does; I didn't bother reading the other answer since I didn't really like the approach.