How to hide an outline on a form

Question

I need to create a form with an input inside it. I use a background image on the input to make it look like a button. Every time someone clicks on it, it sends $ POST, the behavior I want to achieve.

But the problem is about the circuit around the form. The outline shows when we click the form. This is insignificant, but it would be great if the shape (or input) lost its outline.

I am testing it with Firefox 3.6 and flock. Both of them show circuit 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 happens and how to hide the outline?

Answer 1

, ": "; , ( HTML- Firefox, ).

Firefox, .

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

Answer 2

CSS

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

.

:

. , - - (, , enter ).

, Chrome :

http://img714.imageshack.us/img714/7445/googlechromescreensnapz.jpg

CSS- ( , , , , Lorem Ipsum ):

#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 3

Api ...

border: none;

at your entrance