Html 如何添加搜索按钮？_Html_Css

Html 如何添加搜索按钮？

html css

Html 如何添加搜索按钮？,html,css,Html,Css,我在我的网站上有一个搜索输入，它通过点击“回车”来工作，但由于某些原因，我不知道如何简单地实现一个可点击的“搜索”按钮（图像按钮）来进行旁边的搜索。我该怎么做这是我的搜索代码： <div id="searchwrap"> <li id="search"> <form id="search-form" name="search" action="/products" method="get"> <input

我在我的网站上有一个搜索输入，它通过点击“回车”来工作，但由于某些原因，我不知道如何简单地实现一个可点击的“搜索”按钮（图像按钮）来进行旁边的搜索。我该怎么做

这是我的搜索代码：

<div id="searchwrap">
    <li id="search">
        <form id="search-form" name="search" action="/products" method="get">
            <input id="search-input" name="search" type="text">
        </form>
    </li>
</div>

引导程序中的HTML结构：

要使用“提交图像”按钮，您需要在表单中添加图像类型的输入：

<form id="search-form" name="search" action="/products" method="get">
    <input id="search-input" name="search" type="text">
    <input src="path/to/image" name="submit" type="image">
</form>

要实现可点击的“搜索”按钮（图像按钮），您需要CSS和提交按钮

<head>
    <style type="text/css">
        .button-search{
            background-image:url('/imagesStatic/searchIcon.png');
            width:70px;
            height:30px;
        }
        .button-search:hover {
           background-image:url('/imagesStatic/searchIconHover.png');   
        }
    </style>

</head>
<body>
    <div id="searchwrap">
    <li id="search">
       <form id="search-form" name="search" action="/products" method="get">
        <input id="search-input" name="search" type="text">
        <input type="submit" class="button-search" value="search" />
      </form>
    </li>
   </div>
</body>


.按钮搜索{
背景图像：url（'/imagesStatic/searchIcon.png'）；
宽度：70px；
高度：30px；
}
.按钮搜索：悬停{
背景图像：url（'/imagesStatic/searchIconHover.png'）；
}

这可能会对您有所帮助。使用“提交图像”按钮搜索框

.sidebar.gadget{
保证金：0；
填充：20px 16px 20px 30px；
}

首先，您的HTML无效。您的

没有

或

父项。另外，即使你有它们，你也不能将它们嵌套在

标记中。@kdm它们在那里没有按钮……我不明白你的问题，那是我的网站，我需要一个按钮。bootstrap与这个问题有什么关系？你是对的，我会更新我的答案。最后，有人答对了。谢谢：）

<head>
    <style type="text/css">
        .button-search{
            background-image:url('/imagesStatic/searchIcon.png');
            width:70px;
            height:30px;
        }
        .button-search:hover {
           background-image:url('/imagesStatic/searchIconHover.png');   
        }
    </style>

</head>
<body>
    <div id="searchwrap">
    <li id="search">
       <form id="search-form" name="search" action="/products" method="get">
        <input id="search-input" name="search" type="text">
        <input type="submit" class="button-search" value="search" />
      </form>
    </li>
   </div>
</body>