0

如何通过 HTML/CSS 呈现一个普通（启用外观）按钮，该按钮在鼠标悬停或鼠标悬停时不会改变其外观（出于说明目的，例如按 [x] 取消）？

（即，当您将鼠标悬停在它上面或“按下”它时，我不希望它变得“突出显示”或“推动”。）

我知道我可以使用按钮的图片，但是在不同或未来版本的浏览器下，后续的真实按钮可能看起来不同并且与图片不匹配，这就是我希望通过 HTML/CSS 呈现它的原因。

4

4 回答 4

0

也许你可以考虑在按钮上放置<div>一个指定宽度和高度的空白，这样会遮挡按钮上的点击？

根据外部元素的定位模式，您可以使用<div>来覆盖某些外部元素，或者仅覆盖<input type="button" ...>自身（在这种情况下，JavaScript 和 DOM 可以帮助确定按钮的实际大小，从而确定覆盖区域）。

于 2013-01-27T17:56:27.030 回答
0

所有主要浏览器都支持disabled 属性，因此您可以使用它。

<button type="button" disabled>Click Me!</button>

或者，或者：

<input type="button" value="Click Me!" disabled />

为了使它看起来像已启用，您可以编辑其 CSS 属性以使其处于禁用状态：

input[type="button"]:disabled, button[type="button"]:disabled {
  background:#DDD;
  color:#000;
}

但是，正如 OP 指出的那样，这可能使它看起来与某些浏览器/系统上的其他按钮看起来完全不同。您可以在 CSS 规则中省略 background 属性，它们将呈现为任何其他禁用的按钮，但字体颜色类似于启用的按钮。或者，省略禁用的 HTML 属性并将这些按钮置于它们通常属于的上下文之外（作为表单的一部分）。

编辑：请参阅安东尼的答案以获得更好的解释需要应用哪些样式才能使其看起来像您期望的那样；）

于 2013-01-27T17:41:02.247 回答
0

您可以使用 CSS 强制禁用的按钮看起来像正常的按钮。

演示

IE 将其 CSS 隐藏在注册表中。但作为一般规则，应用color: #000;和其他修改会使它看起来像一个普通按钮。

HTML

<input type="submit" disabled="disabled" value="I cannot be pressed." />

CSS

/* Safari */
input[type="submit"]:disabled {
    -webkit-appearance: push-button;
    -webkit-box-align: center;
    text-align: center;
    cursor: default;
    color: ButtonText;
    padding: 2px 6px 3px 6px;
    border: 2px outset ButtonFace;
    background-color: ButtonFace;
    box-sizing: border-box;
    white-space: pre;
}

/* Firefox */
input[type="submit"]:disabled {
    -moz-appearance: button;
    padding: 0px 6px 0px 6px;
    border: 2px outset ButtonFace;
    background-color: ButtonFace;
    color: ButtonText; 
    font: -moz-button;
    line-height: normal;
    white-space: pre;
    cursor: default;
    -moz-box-sizing: border-box;
    -moz-user-select: none;
    -moz-binding: none;
    text-align: center;
    text-shadow: none;
}
于 2013-01-27T17:41:29.667 回答
0

@Navigeteur

只需截取普通按钮的屏幕截图并将其保存为 bmp 或 png 图像并渲染图像而不是按钮 :)

于 2013-01-27T18:04:59.120 回答