howto hide outline on a form

Question

I have to design a form with an input inside it. I use background image on the input so it would look like a button. Every time somebody clicks it, it would send $POST, a behavior I want to achieve.

But the problem is about the outline around the form. The outline shows when we click the form. It's minor, but it would be great to make the form (or input) lose the outline.

I test it using Firefox 3.6 and flock. Both of them show the outline behavior that I want to avoid.

<div id="hdrRight">     
    <form name="input"  action="/home.html"  method="post" id="buttonform" >
        <input type="submit" value="" id="gohome" />
    </form>


#----- CSS part
#hdrRight {
    float:left; width:420px; 
    height:30px;  
    padding:0; 
    }

form#buttonform{
    background-color:transparent;
    border:none;
    clear:both;
    outline:none;
}

input#gohome{
    padding:0;
    margin:0;
    background-color:transparent;
    background-repeat:no-repeat;
    width:280px;
    height:60px;
    border:none;
    float:right;
    background-image: url('images/gohome.png');
    outline:none;
} 
input#gohome:hover  {
    background-image: url('images/gohome_hover.png');
    cursor:pointer;
    outline:none;
} 

Can you explain why this is happening and how to hide the outline?

Answer 1

Insert this in your CSS file for the site

form input
{
    border: none;
    outline: none;
}

And done.

Following Removing The Dotted Ouline:

This is default styling for the purpose of accessibility. For folks without the ability to use a mouse, they still need some visual indicator that they currently have a link active (so, for example, they can press enter to navigate to that link).

After creating a small test page locally, I see the following in Chrome:

With this CSS code (I added the borders so I can see where the form is and where the button is, note that the Lorem Ipsum is inside the form):

#hdrRight {
        float:left; width:420px; 
        height:30px;  
        padding:0; 
        }

    form#buttonform{
        background-color:transparent;
        border:1px solid black;
        clear:both;
        outline:none;
    }

    input#gohome{
        padding:0;
        margin:0;
        background-color:transparent;
        background-repeat:no-repeat;
        width:280px;
        height:60px;
        border:1px solid black;
        float:right;
        background-image: url('images/gohome.png');
        outline:none;
    } 
    input#gohome:hover  {
        background-image: url('images/gohome_hover.png');
        cursor:pointer;
        border: 1px solid blue;
        outline:none;
    }

Answer 2

Appy...

border: none;

to your input

Answer 3

Actually, the "outline: none;" only works for anchor tags, not input tags or button tags (please try testing a sample HTML page in Firefox if you don't believe me).

Since the browser in question is Firefox, there is a browser specific rule for this.

input::-moz-focus-inner { border: 0; }