如何从HTML表单中的重置按钮中删除“重置”文本

Question

我正在尝试为窗体上的reset按钮使用自定义图像，但在创建一个类并插入背景图像时，无法让默认的"Reset“文本消失。我使用表格来创建表单，下面是表单这一部分的代码：

        <tr>
            <td colspan=6>
                <input type="reset" class=cancelButton>
            </td>
        </tr>

它看起来相当直接、简单和直接。下面是我的CSS自定义类代码：

.cancelButton {
    background-image: url(cancel.jpg);
    width: 160px;
    height: 35px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

这是我得到的：

​

​

任何帮助都将不胜感激。这是一个任务，所以我不能走捷径。

Answer 1

不要使用背景图片来传达信息。CSS是用来表示的。

使用常规图像和按钮元素，而不是输入元素(因为按钮元素可以包含图像)。

<button type="reset"><img src="cancel.jpg" alt="Cancel"></button>

Answer 2

将value=""添加到您的输入标记

<input type="reset" value="" class=cancelButton>