提交按钮 css。 Firefox 中的大纲答案

【问题标题】：Submit button css. The outline in Firefox提交按钮 css。 Firefox 中的大纲
【发布时间】：2012-10-22 05:45:23
【问题描述】：

我想控制表单提交按钮的设计，但我不想摆脱焦点上的轮廓（周围的蓝色边框）。我在使用 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">

【问题讨论】：

“丑陋的虚线”是轮廓。对于您的网站或应用程序的键盘用户来说，它们也是一项重要的辅助功能。
这就是重点。这就是我想要原始轮廓（蓝色阴影）或设计自己的轮廓的原因。
很好。 outlinenone.com
虚线与其他浏览器不同，（这可能会让用户感到困惑）并且它们并不清楚，这似乎是一个错误。无论如何，这总比没有好。我了解可访问性的原因。

标签： css forms firefox

【解决方案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;
}

【讨论】：

我不明白你的回答。我也许我没有解释好。问题是在所有浏览器中都有轮廓（选择时周围的蓝色阴影），尤其是 Firefox。这是出于可访问性的原因，并且因为很多人使用标签填写表格。
你应该用firefox看这里：jsfiddle.net/JrEnp/1虚线出现了。我们可以用 ::-moz-focus-inner {border:0;} 摆脱它，但问题是如何创建一个我可以控制的轮廓
:hover 是一个值得考虑的问题。谢谢你。但我要问的是大纲，我的意思是使用选项卡时所做的选择。这是另一回事

【解决方案2】：

您知道，您可以创建一个<div>，然后提交您的表单。

<div class="sbmtBtn" onmouseup="document.forms['myform'].submit()">Submit</div>

然后设置样式

.sbmtBtn{
    width: 80px;
    height: 25px; 
    color: #fff;
    background-color: #ccc;
    border:solid thin #ddd;
    /* Use the following to set a shadow only in FF */
    -moz-box-shadow: 0 0 3px #000000;
}

我总是喜欢使用<div> 作为按钮，因为我有更多的控制权。

【讨论】：

在此处使用div 是非语义的，可能会导致可访问性问题。
我在 FX 16.0.2 中测试了-moz-box-shadow，但它不起作用。
我认为 -moz-box-shadow 不起作用：codepen.io/anon/pen/eifwJ 无论如何，创建一个 div 是一个拥有更多控制权的选项。谢谢
@Nrc 没问题，我的朋友。如果您得到了所需的一切，请记住接受答案。

【解决方案3】：

您可以通过以下方式解决：

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

     -moz-box-shadow: 0 0 3px #333;

     /* or for outline:
     -moz-outline: 1px solid #c00;
     */
}

【讨论】：

我这里测试了，不行：jsfiddle.net/56mfx/15我不明白，和问题中的初始选项有什么区别？