如何在HTML的input按钮中嵌入图片制作聊天应用发送按钮？

给你三种可行的实现方式，按需选择：

方法1：使用<button>标签（最推荐） #

<input type="button">的value属性只能放文本，没法直接嵌套图片，但<button>标签支持在内部放置任意HTML元素，包括图片。代码示例：

<button id="sendButton" type="button">
  <img src="sendbutton.jpg" alt="Send">
</button>

• 给图片加alt属性能提升可访问性；
• 按钮样式可通过CSS自由调整，比如去掉默认边框、设置内边距等。

方法2：给<input>按钮设置CSS背景图 #

如果坚持要用<input>标签，可以通过CSS背景图实现，把value留空，用背景图填充按钮区域：

<input id="sendButton" type="button" value="" />

对应的CSS样式：

#sendButton {
  background-image: url('sendbutton.jpg');
  background-size: cover; /* 可选contain适配按钮尺寸 */
  background-position: center;
  background-repeat: no-repeat;
  width: 40px; /* 根据图片尺寸设置按钮宽高 */
  height: 40px;
  border: none; /* 去掉默认按钮边框 */
  cursor: pointer; /* 鼠标悬停显示手型 */
  padding: 0; /* 去掉默认内边距 */
}

方法3：使用<input type="image">类型 #

这种类型的input本身就是图片按钮，直接指定图片地址即可，但注意它默认会触发表单提交行为，如果聊天应用不需要提交表单，要通过JS阻止默认事件：

<input id="sendButton" type="image" src="sendbutton.jpg" alt="Send" />

对应的JS代码（阻止默认提交）：

document.getElementById('sendButton').addEventListener('click', function(e) {
  e.preventDefault();
  // 这里写你的发送消息逻辑
});

内容的提问来源于stack exchange，提问作者belishMe