css - 提交按钮 css。 Firefox 中的大纲

Question

我想控制表单提交按钮的设计，但我不想摆脱焦点上的轮廓(周围的蓝色边框)。我在使用 Firefox 时遇到问题。

我认为这对于可访问性很重要，因为很多人使用选项卡来填写表格。轮廓给出了查看所选内容的方向。

我认为关键点是边框，我认为为了控制设计我应该给边框一些 css，甚至没有边框。如果我在 Firefox 中设置边框，轮廓就会消失，并且会出现一些难看的虚线。我可以用::-moz-focus-inner {border:0;} 摆脱那几行但是，我不知道如何只给 Firefox 一个阴影。

所以问题是:

• 我能否以适用于所有浏览器(包括 Firefox)的不同方式控制提交按钮的设计？

• 我怎样才能给出可以在 Firefox 中使用的轮廓或阴影？

我这里有例子:http://jsfiddle.net/56mfx/15/

CSS:

input[type="submit"] {    
    width: 80px;
    height: 25px; 
    color: #fff;
    background-color: #ccc;
    border:solid thin #ddd;
}​

HTML:

<input type="submit" name="submit" value"send" id="submit">​

Answer 1

这是为您定制的提交按钮。您也可以使用图像。

HTML:

<input type="submit" value="Submit" class="submit" />

CSS:

.submit{
    background:#BDBDBD;
    height:30px;
    width:100px;
    border:none;
    color:#2E2E2E;
    font:family:Arial;
    font-weight:bold;
    font-size:15px;
    cursor:pointer;
}

.submit:hover{
    background:#DF01D7;
}