如何用图像替换提交按钮？ [jQuery jQtransform 插件]
我正在使用一个名为 jQtransform (http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/) 的 jQuery 插件，它可以为输入框和提交按钮等 HTML 表单元素添加外观。一切都很好，直到我需要使用图像作为提交按钮。我尝试了以下 CSS 代码，但原始按钮仍然出现，而不是图像。
CSS：
/* this is the submit button */
#search {
width: 32px;
height: 32px;
padding: 0px;
margin: 0px;
border: 0px;
background: transparent url(../images/template/icons/search.png) no-repeat center top;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
HTML：
<input type="submit" name="search" value="Search" id="search" />
** 在 Chrome 的“检查元素”功能中查看时，HTML 代码看起来像是已由 jQuery 插件处理过。以上是在 Chrome 中选择“查看页面源代码”时看到的原始 HTML 代码。
我应该怎么做才能用我自己的图像替换提交按钮？我不太擅长 jQuery...
更新
太棒了！所有的答案都有效。一定是我想太多了:)
I'm using a jQuery plugin called jQtransform (http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/) which skins HTML form elements like the input box and submit buttons. All is well until I need to use an image as the submit button. I tried the following CSS code but the original button still appears, and not the image.
CSS:
/* this is the submit button */
#search {
width: 32px;
height: 32px;
padding: 0px;
margin: 0px;
border: 0px;
background: transparent url(../images/template/icons/search.png) no-repeat center top;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
HTML:
<input type="submit" name="search" value="Search" id="search" />
** HTML code looks like it has been processed by the jQuery plugin when viewed in Chrome's 'Inspect Element' feature. The above is the original HTML code as seen when you select 'View Page Source' in Chrome.
What should I do to replace the submit button with my own image? I'm not too good with jQuery...
UPDATE
GREAT! All the answers are working. I must have been thinking too much :)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这应该有效
This should work
使用旧的 HTML
怎么样？How about using good old HTML
<input type="image" ... />?