小编典典

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

css

因此,我可以使用创建带有图像的输入按钮

<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,如果有帮助的话。


阅读 287

收藏
2020-05-16

共1个答案

小编典典

如果要使用CSS为按钮设置样式,请将其设置为type =“ submit”按钮,而不是type =“ image”。type =“
image”需要一个SRC,您无法在CSS中设置它。

请注意,Safari不允许您以所需的方式设置任何按钮的样式。如果需要Safari支持,则需要放置图片并具有提交表单的onclick函数。

2020-05-16