css - 如何使用CSS更改输入按钮图像？(How to change an input button image using CSS?)

Question

So, I can create an input button with an image using

(所以，我可以创建一个带图像的输入按钮)

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

But, I can't get the same behavior using CSS.

(但是，我无法使用CSS获得相同的行为。)

For instance, I've tried

(例如，我试过了)

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

where "myButton" is defined in the CSS file as

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

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

If that's all I wanted to do, I could use the original style, but I want to change the button's appearance on hover (using a myButton:hover class).

(如果这就是我想做的，我可以使用原始样式，但我想在悬停时更改按钮的外观（使用myButton:hover类）。)

I know the links are good, because I've been able to load them for a background image for other parts of the page (just as a check).

(我知道链接很好，因为我已经能够为页面的其他部分加载它们作为背景图像（就像检查一样）。)

I found examples on the web of how to do it using JavaScript, but I'm looking for a CSS solution.

(我在网上找到了如何使用JavaScript进行操作的示例，但我正在寻找一个CSS解决方案。)

I'm using Firefox 3.0.3 if that makes a difference.

(如果这有所不同，我正在使用Firefox 3.0.3。)

  ask by Baltimark translate from so

Answer 1

If you're wanting to style the button using CSS, make it a type="submit" button instead of type="image".

(如果您想使用CSS设置按钮样式，请将其设为type =“submit”按钮而不是type =“image”。)

type="image" expects a SRC, which you can't set in CSS.

(type =“image”需要一个SRC，你不能在CSS中设置它。)

Note that Safari won't let you style any button in the manner you're looking for.

(请注意，Safari不会让您按照您要查找的方式设置任何按钮的样式。)

If you need Safari support, you'll need to place an image and have an onclick function that submits the form.

(如果您需要Safari支持，则需要放置图像并具有提交表单的onclick功能。)