Html 如何创建包含图像提交按钮的搜索栏

我正试图创建一个与谷歌图片完全相同的搜索栏

这是迄今为止我的html代码：

        <form id="search"; action="https://www.google.com/images">
        <input type="text" name="q">
        </form>

---

到目前为止，该图像在搜索栏中，但它没有做任何事情。我想让它将我重定向到一个链接。

您不能在输入中插入按钮（在您的案例中是一个文本框）。我所做的是在文本框顶部放置一个按钮

CSS和HTML更改如下：

.search{
显示：内联块；
框大小：边框框；
线高：20px；
边界半径：50px；
-moz边界半径：50px；
-webkit边界半径：50px；
框大小：边框框；
线高：20px；
高度：30px；
垂直对齐：中间对齐；
填充：12px 20px；
}
.文本框{
边框颜色：浅灰色；
宽度：600px；
}
.提交按钮{
背景图像：url（“https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-256.png");
行高：继承；
文字装饰：无；
光标：指针；
宽度：35px；
背景位置：5px；
背景重复：无重复；
背景尺寸：20px；
背景色：透明；
左边距：-45px；
边界：无；
}

那么，您是否删除了表单元素中的分号？当你键入任何文本并按enter键时，你应该被重定向到google images站点。如果我这样做，它确实有效，但我希望能够单击图像并被重定向到页面。检查答案：-）非常感谢你的回答，这对我帮助很大。同时也为迟来的回答感到抱歉，这几天我突然变得很忙。。。非常感谢。

input[type="text"]{
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
width: 600px;
height: 25px; 
padding: 12px 20px;
border-color: lightgrey;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
background-size: 25px;
padding-left: 50px;
outline: none;
}