让图像成为提交按钮的问题

Question

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

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

知道为什么这不起作用吗？

#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">

Answer 1

Use background-color(specific property of background) property over :hover as if we use background, it will override all background properties

试试这个：

#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'>

Answer 2

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

Answer 3

与其尝试使用背景图像，不如尝试使用图像输入。

<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 4

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

让图像成为提交按钮的问题

Issues getting an image to become a submit button

javascript

css

image

background-image