如何在表单上隐藏轮廓

Question

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

但问题在于表格周围的轮廓。当我们单击表单时，大纲会显示。这是次要的，但最好让表单（或输入）失去轮廓。

我使用 Firefox 3.6 和flock 对其进行了测试。它们都显示了我想避免的大纲行为。

    

        



#----- CSS 部分
#hdrRight {
    向左飘浮;宽度：420px；
    高度：30px；
    填充：0；
    }

表单#按钮表单{
    背景颜色：透明；
    边框：无；
    明确：两者；
    大纲：无；
}

输入#gohome{
    填充：0；
    边距：0；
    背景颜色：透明；
    背景重复：不重复；
    宽度：280px；
    高度：60px；
    边框：无；
    浮动：对；
    背景图片: url('images/gohome.png');
    大纲：无；
}
输入#gohome：悬停{
    背景图片: url('images/gohome_hover.png');
    光标：指针；
    大纲：无；
} 

您能解释一下为什么会发生这种情况以及如何隐藏轮廓吗？
    

        

    
    

        
【问题讨论】：

            

Answer 1

其实，“大纲：无；”仅适用于锚标签，不适用于输入标签或按钮标签（如果您不相信我，请尝试在 Firefox 中测试示例 HTML 页面）。

由于有问题的浏览器是 Firefox，因此有一个特定于浏览器的规则。

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

Answer 2

将其插入网站的 CSS 文件中

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

完成了。

关注Removing The Dotted Ouline：

这是默认样式 可访问性的目的。对于人们 没有使用鼠标的能力， 他们仍然需要一些视觉指示器 他们目前有一个活跃的链接 （例如，他们可以按回车键 导航到该链接）。

在本地创建一个小测试页面后，在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;
    }

Answer 3

应用...

border: none;

您的意见