Remove outline on button click

HTML & CSS
1

On my site http://bit.ly/dcnrbJ (login: demo/demo) I would like to remove the outline that appears when you click on the search button in the footer, how can I do that? Thanks

2

.footer-forms input:active { outline:none;} will get rid the outline on ALL the inputs in the footer… if all you want is the SEARCH not to have an outline use #searchsubmit:active {outline:none}

3

still having the same problem in firefox though

4

Because Firefox leaves :focus on an element who has been clicked. :active only affects WHILE clicking.

So you’d also do #theelement:focus {outline: 0;}

HOWEVER
you’d better have something else for :focus so users know that’s where their focus is. If you don’t know what I mean, unplug your mouse and navigate your web site with keyboard only. Do you know where you are at all times? If you don’t, you have not defined focus styles (or, you are relying on “outline” which is why it’s there).

Always add a style to show users where they are IF you remove outline. Most of the time, I use the :hover style:

#someelement:focus, #someelement:hover, #someelement:active {
styles different from no hover, focus or active;
}

5

I have the following styles now

.footer-forms input:active { outline:none;}
.footer-forms input:focus { outline:none;}

But I’m still seeing the dotted outline in my footer forms :S

6

Yeah sorry Firefox is being more stubborn here. I can see why: you’ve made your whole page inaccessible. Thanks, tell everyone without a mouse to leave.
You need
.footer-forms input::-moz-focus-inner { border: 0; } though giving this to you is like showing someone how to kick a puppy : ( PLEASE don’t use it without adding :focus styles!!!

Here’s your form with some focus and title attributes added, along with a wrapping div inside to make your forms valid:
http://stommepoes.nl/tanzform.html

When you keyboard through that form, you see the background image changes now also with :focus and :active (active here is really for IE6 who thinks :active == :focus). It’s not foolproof because IE7 is a fool and will ignore :focus styles and now we’ve removed “outline” (which IE7 will have by default) which is why your reset is bad: it removes outline on “a” and “input” which is BAD. At least if you remove from just input:focus and a:focus, IE7 will ignore that and still show an outline on :focus.

That reset is why I can’t navigate easily through your main menu either. Your reset removes outline but you did not add :focus styles.

See the link in the footer of the page I linked (also, it’s a temp page: I’ll remove it from my servers after a while). Outline: none is evil unless you replace with other, sufficient styles.

Oh, a note: the reason your outline wasn’t surrounding the whole input, but just a slice in the middle: submits have default padding in many browsers… usually it’s a bad idea to remove that padding, but here it wasn’t helping anything and you’re using an image, so you don’t want padding (instead, you would add styles to :active to give the user “clicking” feedback as I have in my version).

7

thanks alot for the advice, im implementing this on my form, and will keep this info in mind from the start next time