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

你知道，你可以创建一个<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>作为按钮，因为我有更多的控制权。

Answer 2

这是您的自定义提交按钮。您也可以使用图片。

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

Answer 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;
     */
}

提交按钮css。 Firefox中的大纲

3 个答案: