您可以使用 JavaScript 将 CSS 背景图像转换为提交按钮吗？ [复制]答案

【问题标题】：Can you turn a CSS background-image into a submit button using JavaScript? [duplicate]您可以使用 JavaScript 将 CSS 背景图像转换为提交按钮吗？ [复制]
【发布时间】：2017-10-18 22:28:20
【问题描述】：

这是 HTML 表单：

<form method="post" action="search.php">
<input type="text" id="inputSearch"/>
</form>

还有一些 CSS：

#inputSearch {
    padding:18px 15px 18px 52px;
    font-size:1rem;
    color:#1f5350;
    border:none;
/*defining background image as a search symbol*/
    background: #7accc8 url(search.png) 8px 14px no-repeat;
    background-size:25px 26px;
}

搜索图标只是一张静态图片。使用 JavaScript，如何在不添加更多 HTML 代码的情况下获取 CSS 背景图像并使用它来创建可点击的提交按钮？

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以将您的搜索图标包裹在<a></a> 标签中，这样您的图片将是可点击的，并且可以在用户点击后将其带到您想要的页面：这是一个示例：

    <div class="maindiv">
    <form id="myform" name="myform" method="post" action="schitems.php">  
    <input type="search"  id="itemcd" name="itemcd" class="inputfields" placeholder="Type an Ingredient..." />
<a href="search_results.html"><img src="search_icon.jpg" alt="search"></a>
    </form>
    </div>

【讨论】：

【解决方案2】：

您想要实现的目标实际上无法通过原始 CSS 实现；您需要使用 JavaScript 并将单击事件处理程序附加到元素。

不幸的是，考虑到您正在使用background-image，您的图像本质上是整个<input> 元素本身的“一部分”，据我所知，您可以'不要分离出点击功能（不使用图像的单独元素）。

话虽如此，您可以通过以下方式使表单在单击<input> 的任何部分时提交。这可以通过在允许表单提交触发之前仔细检查输入中是否确实有 content 来改进：

var form = document.getElementById('myform');
var input = document.getElementById('itemcd');
input.onclick = function() {
  if (this.value.length > 0) {
    form.submit();
  }
}

#myform {
  width: 260px;
  margin: 0 auto;
}

input[type="search"] {
  padding: 18px 15px 18px 52px;
  font-size: 1rem;
  color: #1f5350;
  /*removing boder from search box*/
  border: none;
  /*defining background image as a search symbol*/
  background-image: url(http://placehold.it/100);
  background-repeat: no-repeat;
  /*background-size*/
  -webkit-background-size: 25px 26px;
  -moz-background-size: 25px 26px;
  -o-background-size: 25px 26px;
  background-size: 25px 26px;
  /*positioning background image*/
  background-position: 8px 14px;
  /*changing background color form white*/
  background-color: #7accc8;
  outline: 0;
}


/*now using placeholder property to change color of placholder text and making it consitent accross the browser by use of prefix*/

input[type="search"]::-webkit-input-placeholder {
  color: #b1e0de;
}

input[type="search"]:-moz-placeholder {
  /* Firefox 18- */
  color: #b1e0de;
}

input[type="search"]::-moz-placeholder {
  /* Firefox 19+ */
  color: #b1e0de;
}

input[type="search"]:-ms-input-placeholder {
  /* interner explorer*/
  color: #b1e0de;
}

<div class="maindiv">
  <form id="myform" name="myform" method="post" action="schitems.php">
    <input type="search" id="itemcd" name="itemcd" class="inputfields" placeholder="Type an Ingredient..." />
  </form>
</div>

希望这会有所帮助！ :)

【讨论】：