html - 如何使用图像作为按钮？

Question

FIDDLE

如您所见，这是图像后面的一个按钮。我想删除那个按钮。并使用图像作为按钮

.buttonup {
  padding: 0px;
  width: 25px;
  cursor: pointer;
  margin-right: 25px;
}

.buttondw {
  width: 25px;
  cursor: pointer;
  margin-left: 25px;
}

#count {
  display: inline-block;
  border-radius: 0px;
  background-color: #ff9933;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  padding: 5px;
  width: 50px;
  margin-top: 0px;
}

<center>
  <button class="buttonup" id="plus" style="vertical-align:middle"><span><img src="http://i.imgur.com/jWPUjR9.png"> </span> </button> <span id="count">0</span>
  <button class="buttondw" id="minus" style="vertical-align:middle"><span><img src="http://i.imgur.com/Vu6tuf9.png"> </span> </button>
</center>

Answer 1

使用输入类型="图像"

如果您不想提交页面或页面所在的表单，则需要在点击事件上使用 preventDefault()

.buttonup {
  padding: 0px;
  width: 25px;
  cursor: pointer;
  margin-right: 25px;
}

.buttondw {
  width: 25px;
  cursor: pointer;
  margin-left: 25px;
}

#count {
  display: inline-block;
  border-radius: 0px;
  background-color: #ff9933;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  padding: 5px;
  width: 50px;
  margin-top: 0px;
}

<center>
  <input type="image" class="buttonup" id="plus" style="vertical-align:middle" src="http://i.imgur.com/jWPUjR9.png" /> <span id="count">0</span>
  <input type="image" class="buttondw" id="minus" style="vertical-align:middle" src="http://i.imgur.com/Vu6tuf9.png" />
</center>