html - 如何在表格中隐藏大纲

Question

我必须设计一个包含输入的表单。我在输入上使用背景图像，所以它看起来像一个按钮。每次有人点击它时，它都会发送 $POST，这是我想要实现的行为。

但问题出在表格周围的轮廓上。当我们单击表单时，轮廓就会显示出来。这是次要的，但是让表单(或输入)失去轮廓会很棒。

我使用 Firefox 3.6 对其进行了测试，然后蜂拥而至。它们都显示了我想要避免的大纲行为。

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

您能解释一下为什么会这样以及如何隐藏轮廓吗？

Answer 1

将此插入网站的 CSS 文件

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

完成。

正在关注 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).

在本地创建一个小测试页面后，我在 Chrome 中看到了以下内容:

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