css - 如何使用 CSS 更改输入按钮图像

Question

所以，我可以使用图像创建一个输入按钮

<INPUT type="image" src="/images/Btn.PNG" value="">

但是，我无法使用 CSS 获得相同的行为。例如，我试过

<INPUT type="image" class="myButton" value="">

其中“myButton”在 CSS 文件中定义为

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

如果这就是我想要做的，我可以使用原始样式，但我想更改按钮悬停时的外观(使用 myButton:hover 类)。我知道链接很好，因为我已经能够为页面的其他部分加载它们作为背景图像(只是作为检查)。我在网上找到了如何使用 JavaScript 执行此操作的示例，但我正在寻找 CSS 解决方案。

如果有差异，我正在使用 Firefox 3.0.3。

Answer 1

如果您想使用 CSS 为按钮设置样式，请将其设为 type="submit"按钮而不是 type="image"。 type="image"需要一个不能在 CSS 中设置的 SRC。

请注意，Safari 不会让您按照您正在寻找的方式设置任何按钮的样式。如果您需要 Safari 支持，则需要放置图像并具有提交表单的 onclick 函数。