如何实现自定义<input type="reset" />？答案

【问题标题】：How to implement customized <input type="reset" />?如何实现自定义<input type="reset" />？
【发布时间】：2009-10-22 02:02:05
【问题描述】：

当鼠标悬停时，它应该看起来像

<input type="image" src="1.jpg" />

onmouseout 时应该是这样的

<input type="image" src="2.jpg" />

【问题讨论】：

标签： html reset

【解决方案1】：

我会保留<input type=reset> 并使用Javascript 隐藏它，创建一个<a> 元素并尽可能多地设置它的样式，将click 上的事件处理程序附加到锚点以触发重置，并使用CSS :hover 位于锚点上，因此背景图像会发生变化。没有 Javascript 的用户会看到常规的 ole' 重置按钮。

【讨论】：

【解决方案2】：

在您的 CSS 中添加 :hover 的正确规则；它应该适用于除 IE 之外的所有内容，IE 不支持在任何元素中悬停。

【讨论】：

我在问如何改变重置控件的外观，因为它不支持类似 src 属性的东西。

【解决方案3】：

我不知道你到底想做什么，但像 Tordek 一样，我建议使用 CSS 和 :hover

这是 CSS：

.myButton{
  background:url("2.jpg") no-repeat;
  width: 200px;
  height: 100px;
  border: none;
}
.myButton:hover {
  background:url("1.jpg") no-repeat;
  width: 200px;
  height: 100px;
  border: none;
}

这是 HTML：

<input type="submit" class="myButton" value="">

【讨论】：

【解决方案4】：

不要担心更改重置按钮本身的显示方式，让它不可见。制作您自己的重置按钮，由带有href哈希的链接表示，并在单击时调用其余按钮：

<a href="#" class="resetPush">
  <span>Reset</span>
</a>

加上下面的javascript：

$("input[type='reset']").hide();
$("a.resetPush").click(function(e){
  e.preventDefault();
  $("input[type='reset']").trigger("click");
});

至于链接的翻转效果，css可以为你处理：

a.resetPush span { display:none; }
a.resetPush      { display:block; width:100px; height:25px;
                   background: url("slider.jpg") left top no-repeat; }
a.resetPush:hover{ background-position: left bottom; }

【讨论】：

【解决方案5】：

<input type="image"> 只是为了呈现某种地图，最终用户可以在其中指出特定位置。

但你不想这样做。您只需要一个带有背景图像的按钮。因此，我建议用设置为url(path/to/your/image.png) 的CSS background-image 替换它为<input type="reset">。然后，您可以添加一些 Javascript（jQuery 可能吗？有一个 hover 函数）在鼠标悬停和鼠标悬停时更改 CSS 类。例如：

$("#buttonid").hover(
    function () {
        $(this).addClass('hover');
    }, 
    function () {
        $(this).removeClass('hover');
    }
);

使用 CSS

#buttonid {
    background: url(path/to/your/image.png);
}
#buttonid.hover {
    background-position: 20px; /* Make use of CSS sprites. */
}

（更多关于 CSS 精灵 here）

有些人会建议为此使用 CSS :hover 伪类，但这不适用于除 <a> 之外的所有浏览器的其他元素。

【讨论】：