-2

我的网站上有一个搜索输入，可以通过单击“Enter”来工作，但由于某种原因，我无法弄清楚如何简单地实现一个可单击的“搜索”按钮（图像按钮）以在它旁边进行。我该怎么做呢？

这是我的搜索代码：

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

4 回答 4

3

要拥有提交图像按钮，您需要在表单中添加图像类型的输入：

<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>
于 2013-09-29T03:11:29.963 回答
2

这可能会对您有所帮助。带有提交图像按钮的搜索框。

.sidebar .gadget {
  margin: 0;
  padding: 20px 16px 20px 30px;
}
<div class="gadget">

  <form method="get" id="search" action="#">
     <span>
        <input type="text" value="Search..." name="s" id="s" />
        <input name="searchsubmit" type="image" src="search.gif" value="Go" id="searchsubmit" class="btn"  />
     </span>
  </form>

</div>

于 2013-09-29T05:15:44.030 回答
1

要实现可点击的“搜索”按钮（图像按钮），您需要 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>
于 2013-09-29T03:19:39.030 回答
0 
    <form class="navbar-form" role="search">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
        <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
        </div>
    </div>
    </form>

来自引导程序的 HTML 结构：http: //jsfiddle.net/XfzFQ/23/

于 2013-09-29T02:56:50.833 回答