howto hide outline on a form

问题

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?

回答1:

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; }

回答2:

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:

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

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;
    }

回答3:

Appy...

border: none;

to your input

来源：https://stackoverflow.com/questions/2671811/howto-hide-outline-on-a-form

标签

html

css

cross-browser

forms