使图像成为提交按钮的问题答案

【问题标题】：Issues getting an image to become a submit button使图像成为提交按钮的问题
【发布时间】：2016-06-11 06:05:35
【问题描述】：

我试图让我的提交按钮变成一个箭头，但有背景。像这样：

我能够让提交按钮出现在输入中，但是由于某种原因它没有占据它的全部高度。我将一个箭头图像上传到我的服务器，就像示例中的箭头一样，但是每当我取消注释背景图像并且不重复时，它不会对背景图像做任何事情。我不确定我是否正确。我在这里查看了其他问题，但我无法正常工作。

任何想法为什么这不起作用？

#footer-grid1-newsletter-input {
	margin-top: 15px;
	width: 80%;
	height: 20px;
	padding: 8px 5px;
}
#footer-grid1-newsletter-submit {
	/*background:url(http://optimumwebdesigns.com/icons/right-arrow.png);
	background-repeat: no-repeat;*/
	height: 39px;
	margin-left: -54px;
	width: 50px;
	border: 0;
	background: #0085A1;
	color: #FFF:
    -webkit-appearance: none;
	cursor: pointer;
}
#footer-grid1-newsletter-submit:hover {
	background: rgb(69,186,149);
}

    <input type="email" id="footer-grid1-newsletter-input" placeholder="Your Email Address">
	<input type="submit" id="footer-grid1-newsletter-submit" name="submit">

【问题讨论】：

_it 对背景图像没有任何作用是什么意思。 _ ?
您刚刚给出的答案几乎正是我想要的，除非有办法让箭头悬停在提交按钮上。

标签： javascript image css background-image

【解决方案1】：

不要使用<input type="submit">，而是使用<button type="submit"></button> 并将您的图像放在按钮内。或者，使用 Unicode 箭头，如下例所示：

window.onload = function() {
  var form = document.getElementById('form');
  form.onsubmit = function(e) {
    e.preventDefault();
    var result = document.getElementById('result');
    result.value = 'Form Submitted!';
  }
}

div.input {
  border: none;
  width: 20rem;
  border: 2px solid black;
  margin: 1rem 0;
}

input {
  display: block;
  float: left;
  border: none;
  padding: 0 0.5rem;
  margin: 0;
  line-height: 2rem;
  width: 18rem;
  box-sizing: border-box;
}

button {
  background-color: #0074D9;
  border: none;
  color: white;
  line-height: 2rem;
  font-weight: bold;
  padding: 0;
  margin: 0;
  width: 2rem;
  height: 2rem;
  box-sizing: border-box;
}

label::after {
  content: '';
  display: block;
}

#result {
  width: 20rem;
  height: 5rem;
}

<form id="form">
  <div class="input">
    <input id="email" type="email" placeholder="Your Email Address..." required>
    <button id="submit" type="submit">&#10142;</button>
  </div>
  <label for="result">Result:</label>
  <textarea id="result"></textarea></result>
</form>

【讨论】：

【解决方案2】：

不要尝试使用背景图像，而是尝试图像输入。

<input type="image" id="footer-grid1-newsletter-submit"  src="http://optimumwebdesigns.com/icons/right-arrow.png" name="submit">

编辑

试试这个 jsfiddle：https://jsfiddle.net/j031/ydc68y0a/

【讨论】：

【解决方案3】：

使用background-color(background的特定属性)属性覆盖:hover，就像我们使用background一样，它将覆盖所有background属性

试试这个：

#footer-grid1-newsletter-input {
  margin-top: 15px;
  width: 80%;
  height: 20px;
  padding: 8px 5px;
}
#footer-grid1-newsletter-submit {
  background: url('http://optimumwebdesigns.com/icons/right-arrow.png') #0085A1 center center;
  background-repeat: no-repeat;
  height: 39px;
  margin-left: -54px;
  width: 50px;
  border: 0;
  cursor: pointer;
}
#footer-grid1-newsletter-submit:hover {
  background-color: rgb(69, 186, 149)
}

<input type="email" id="footer-grid1-newsletter-input" placeholder="Your Email Address">
<input type="submit" id="footer-grid1-newsletter-submit" name="submit" value='&nbsp'>

【讨论】：

【解决方案4】：

只需将提交按钮的 opacity 属性设置为 0 即可完全透明。

【讨论】：