4

我已经成功地用图像替换了按钮。但似乎图像被放置在按钮的顶部。我不希望将我的 CSS 放入我的 CSS 中，因为有其他样式与它重叠，并且我不希望有任何重定向页面。

<button type="reset"><img src="images/cancel.png" width="15"></button>
4

4 回答 4

12

在 CSS 中执行此操作！

button {
  background-image: url(images/cancel.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* put the height and width of your image here */
  height: 50px;
  width: 200px;
  border: none;
}

button span {
  display: none;
}

那么你的按钮是：

<button type="reset" title="In some browsers, this appears as a tooltip"> 
    <span>Cancel</span></button>

您还可以添加说明符来覆盖默认按钮行为 - 例如-webkit-appearance: none;，但我相信这足以满足您的需求。

于 2012-07-08T05:12:58.817 回答
2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        function change(thi) {
            debugger;
            thi.setAttribute("src", "guitar.jpg");
            thi.innerHTML = "";
            thi.outerHTML = thi.outerHTML.replace(/button/g, "img");
        }
    </script>
</head>
<body>
    <button onclick="change(this)">OUR BUTTON</button>
</body>
</html>
于 2017-04-04T11:55:34.633 回答
1

为什么需要按钮？

您可以尝试删除按钮标签并尝试以下任一方法：

<img src="images/cancel.png" width="15" onClick="document.form1.reset();">

或者

<a href="#" onClick="document.form1.reset();"><img src="images/cancel.png" width="15"></a>

只需将“form1”替换为您的表单名称即可。

于 2012-07-08T05:16:32.850 回答
0 
<button type="reset" width="15" style="background-image: url('images/cancel.png');"/>
于 2012-07-08T05:37:48.307 回答