HTML提交按钮在设置边框时不明显下沉

Question

我设计了漂亮的HTML表单按钮（用于输入类型=“提交”）。但是我意识到他们在按下时不再沉没。通常，这不是问题，因为按下按钮立即将您带到下一页。在Firefox上，这有点可见，因为围绕按钮的文字出现了一些虚线的轮廓。但是用户试图在Safari上上传大图像，但尚不清楚按下按钮或已上传图像。

那么，将风格化提交的最佳方法是什么，这使得在被压迫时非常清楚？我可以使用JavaScript来检测压迫和不压制和相应地更改课程，但是我想我希望有一种更简单的标准方法可以做到这一点？如果没有，是否有一个好的jQuery库可以处理？

这是我在说的： http://jsfiddle.net/gctjq/

刚找到 jQuery UI按钮小部件呢猜猜这就是我想要的，如果没有简单的标准HTML解决方案。我已经将jQuery UI用于其他元素，想知道自定义以获取各种尺寸和颜色的按钮将是多么困难。它似乎更适合1个标准尺寸和颜色。

Answer 1

您使用：活动选择器

在这里看到它

http://jsfiddle.net/gctjq/1/

值得注意的是，它将在所有现代浏览器的期望中工作...鼓声... IE！好吧，这是在IE 8中的工作正在禁用提交时的提交按钮，以清楚使用数据已发送并正在处理。像这样的事情也表明它实际上是。

<input type="submit" onclick="this.disabled=true;this.value='loading...'" />

Answer 2

指定边框时，它会在某种程度上删除浏览器的默认样式。

您需要手动指定按下按钮时的外观。

还要注意，当表单上的任何元素集中时，IE将在提交按钮中添加1PX边框。 （我知道）摆脱它的唯一方法是申请 border: none; 按钮，以另一种方式模仿边界。