将图像变为提交按钮的问题

Question

我正在尝试将我的提交按钮变成箭头，但有背景。像这样：

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

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

＆＃13;

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

  

使用background-color（background）属性超过:hover属性，就像我们使用 background 一样，它会覆盖所有{{1}属性

试试这个：

＆＃13;

＆＃13;

background

＆＃13;

#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)
}

＆＃13;

＆＃13;

＆＃13;

Answer 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/

Answer 3

不使用<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>

Answer 4

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