Question

我正在尝试创建一个搜索框，提交按钮在搜索框的左侧有一个放大图像。我使用字体很棒来获取图像，但是当我尝试将其作为输入添加时，我也会得到一个不同的框，表示提交。我想知道如何删除提交框，只是放大镜。此外，除了使用绝对定位之外，关于如何将放大镜放在搜索栏内的任何建议都会有所帮助。

这是JSFiddle：https://jsfiddle.net/ouuxzs05/

HTML：

from scapy.all import RTP
for pkt in pkts:
    if pkt["UDP"].dport==5016: # Make sure its actually RTP
        pkt["UDP"].payload = RTP(pkt["Raw"].load)

CSS：

  <div id="searchbar">
        <div id="SearchForm"> 
            <aside id="search">
                <form action="http://example.com/search.php" method="get" onsubmit="return check_small_search_form()"> 
                <input type="text" name="search_query" id="search_query" class="search-textbox" value="" placeholder="Search Products and Categories">
                <input type="image" class="fa fa-search submit-button" src="">
                </form>
            </aside>

Answer 1

我会将其设为button，然后移除边框并background，使用translateX()将其放在搜索框上，并向其添加右padding搜索框，因此文本不会在按钮下面。

同时从搜索outline字段，按钮中移除了input，并向搜索padding

添加了左input

#searchbar .search-textbox {
  height: 30px;
  position: relative;
  border-radius: 8px;
  width: 200px;
  margin-left: 200px;
  padding: 0 25px 0 .5em;
  outline: 0;
}

button.iconfont {
  border: 0;
  background: transparent;
  transform: translateX(-150%);
  outline: 0;
}

<script src="https://use.fontawesome.com/040e2f1f79.js"></script>

<div id="searchbar">
  <div id="SearchForm">
    <aside id="search">
      <form action="http://example.com/search.php" method="get" onsubmit="return check_small_search_form()">
        <input type="text" name="search_query" id="search_query" class="search-textbox" value="" placeholder="Search Products and Categories">
        <button type="submit" class="btn btn-success iconfont">
          <i class="fa fa-search"></i>
        </button>
      </form>
    </aside>

Answer 2

使用您可以使用以下代码的按钮替换输入类型图像。

solr_url=http://ammar-HP-ProBook-450-G4:8983/solr

如何删除输入div生成的框？

2 个答案: