2

我设计了漂亮的 html 表单按钮（用于 input type="submit"）。但我意识到它们在按下时不再下沉。通常，这不是问题，因为按下按钮会立即将您带到下一页。在 Firefox 上它有点明显，因为虚线轮廓出现在按钮的文本周围。但是一个用户试图在 safari 上上传一张大图，但根本不清楚按钮是否被按下或图像正在上传。

那么，让风格化提交带有漂亮边框的最佳方式是什么？我可以使用 javascript 来检测按下和松开并相应地更改类，但我想我希望有一个更简单的标准方法来做到这一点？如果没有，是否有一个好的 jQuery 库来处理这个问题？

这就是我所说的：http: //jsfiddle.net/gctJq/

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

4

2 回答 2

0

你使用 :active 选择器

在这里看到它的作用

http://jsfiddle.net/gctJq/1/

值得注意的是，它将适用于所有现代浏览器的期望......鼓声......即！ 好吧，它在 ie 8 中有效，但是你不允许输入任何文本，而是使用背景图像来输入文本，以确保它在所有浏览器中看起来都一样，我会在你的情况下做什么正在禁用提交时的提交按钮，从而清楚地表明数据已发送并正在处理中。像这样的东西也将表明它实际上是。

<input type="submit" onclick="this.disabled=true;this.value='loading...'" />
于 2010-12-03T23:51:27.280 回答
0

当您指定边框时，它会在一定程度上移除浏览器的默认样式。

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

另请注意，当表单上的任何元素获得焦点时，IE 会为提交按钮添加 1px 边框。摆脱它的唯一方法（我知道）是应用border: none;到按钮并以另一种方式模仿边框。

于 2010-12-03T23:53:30.680 回答