1

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

3 回答 3

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;
}
于 2012-11-02T12:57:17.760 回答
0

你知道，你可以创建一个<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;
}

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

于 2012-11-01T15:50:02.650 回答
0

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

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;
     */
}
于 2012-11-02T11:17:11.647 回答