Question

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

但问题在于表格周围的轮廓。我们点击表单时会显示大纲。它很小，但是使表单（或输入）丢失轮廓会很棒。

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

<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：

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

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

... APPY

border: none;

到您的输入

Answer 3

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

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

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

如何在表单上隐藏大纲

3 个答案: