可以使用JavaScript将CSS背景图像转换为提交按钮吗？

以下是HTML表单：

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

---

搜索图标只是一个静态图像。使用JavaScript，我如何抓取CSS背景图像并使用它创建一个可点击的提交按钮而不添加更多HTML代码？

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

不幸的是，考虑到您使用的是

背景图像

，您的图像本质上是整个

元素本身的“一部分”，据我所知，您无法分离单击功能（不为图像使用单独的元素）

话虽如此，您可以使表单在点击

的任何部分时提交以下内容。在允许触发表单提交之前，可以通过双重检查输入中是否确实输入了内容来改进：

var form=document.getElementById（'myform'）；
var input=document.getElementById（'itemcd'）；
input.onclick=函数（）{
如果（this.value.length>0）{
表单提交（）；
}
}

#myform{
宽度：260px；
保证金：0自动；
}
输入[type=“search”]{
填充：18px 15px 18px 52px；
字号：1rem；
颜色：#1f5350；
/*从搜索框中删除boder*/
边界：无；
/*将背景图像定义为搜索符号*/
背景图片：url(http://placehold.it/100);
背景重复：无重复；
/*背景尺寸*/
-webkit背景尺寸：25px 26px；
-moz背景尺寸：25px 26px；
-o-背景尺寸：25px 26px；
背景尺寸：25px 26px；
/*背景图像定位*/
背景位置：8px 14px；
/*改变背景颜色为白色*/
背景色：#7accc8；
大纲：0；
}
/*现在使用placeholder属性更改placeholder文本的颜色，并通过使用前缀使其在浏览器中保持一致*/
输入[type=“search”]：-webkit输入占位符{
颜色：#b1e0de；
}
输入[type=“search”]：-moz占位符{
/*火狐18-*/
颜色：#b1e0de；
}
输入[type=“search”]：-moz占位符{
/*Firefox 19+*/
颜色：#b1e0de；
}
输入[type=“search”]：-ms输入占位符{
/*内部浏览器*/
颜色：#b1e0de；
}

---

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

不幸的是，考虑到您使用的是

背景图像

，您的图像本质上是整个

元素本身的“一部分”，据我所知，您无法分离单击功能（不为图像使用单独的元素）

话虽如此，您可以使表单在点击

的任何部分时提交以下内容。在允许触发表单提交之前，可以通过双重检查输入中是否确实输入了内容来改进：

var form=document.getElementById（'myform'）；
var input=document.getElementById（'itemcd'）；
input.onclick=函数（）{
如果（this.value.length>0）{
表单提交（）；
}
}

#myform{
宽度：260px；
保证金：0自动；
}
输入[type=“search”]{
填充：18px 15px 18px 52px；
字号：1rem；
颜色：#1f5350；
/*从搜索框中删除boder*/
边界：无；
/*将背景图像定义为搜索符号*/
背景图片：url(http://placehold.it/100);
背景重复：无重复；
/*背景尺寸*/
-webkit背景尺寸：25px 26px；
-moz背景尺寸：25px 26px；
-o-背景尺寸：25px 26px；
背景尺寸：25px 26px；
/*背景图像定位*/
背景位置：8px 14px；
/*改变背景颜色为白色*/
背景色：#7accc8；
大纲：0；
}
/*现在使用placeholder属性更改placeholder文本的颜色，并通过使用前缀使其在浏览器中保持一致*/
输入[type=“search”]：-webkit输入占位符{
颜色：#b1e0de；
}
输入[type=“search”]：-moz占位符{
/*火狐18-*/
颜色：#b1e0de；
}
输入[type=“search”]：-moz占位符{
/*Firefox 19+*/
颜色：#b1e0de；
}
输入[type=“search”]：-ms输入占位符{
/*内部浏览器*/
颜色：#b1e0de；
}

---

您可以在

---

您可以在

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

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