提交按钮图像

Question

我想使用提交按钮图像而不是标准按钮。我在Google和SO上搜索并获得了一些不同的方法。

使用图像作为提交按钮的正确方法是什么？

此外，我还想为按钮添加三种状态 - 正常，悬停，onclick

我尝试了什么

HTML

<input type="submit" value="Subscribe">

CSS

input[type=submit] {
    background:url(../images/btn-subscribe.gif) none;
    text-indent:-9999px;
    width:109px;
    height:41px;
}

显示什么

它应该显示什么

Answer 1

<input type="image" src="path to image" name="submit" />

更新：

对于按钮状态，您可以使用type =“submit”然后向其添加一个类

<input type="submit" name="submit" class="states" />

然后在css中，使用背景图像：

.states{
background-image:url(path to url);
height:...;
width:...;
}

.states:hover{
background-position:...;
}

.states:active{
background-position:...;
}

Answer 2

<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
标准提交按钮的位置为TYPE="submit"，我们现在有TYPE="image"。图像类型默认为表单提交按钮。更简单

Answer 3

出于可访问性原因，即使您隐藏了此文本，或者使用<input type="image" .../>始终为此输入字段指定alt=""属性，也始终指定提交的值非常重要。

盲人不知道如果按钮不包含有意义的alt=""或value=""将会执行的操作。

Answer 4

您必须删除边框并在输入上添加背景图像。

.imgClass { 
    background-image: url(path to image) no-repeat;
    width: 186px;
    height: 53px;
    border: none;
}

现在应该是好的，通常。