如何隐藏表单上的轮廓 [英] howto hide outline on a form

问题描述

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

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.

我使用Firefox 3.6和flock测试。

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

输入＃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;
}

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

您能解释为什么会发生这种情况，以及如何隐藏轮廓？ p>

Can you explain why this is happening and how to hide the outline?

推荐答案

其实，outline：none;仅适用于锚标记，而不适用于输入标记或按钮标记（如果您不相信我，请尝试在Firefox中测试示例HTML页面）。

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).

由于所讨论的浏览器是Firefox，因此有一个针对浏览器的规则。

Since the browser in question is Firefox, there is a browser specific rule for this.

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

这篇关于如何隐藏表单上的轮廓的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！