【问题标题】:how to clickable search icon in form input field using css如何使用css在表单输入字段中单击搜索图标
【发布时间】:2019-07-18 10:39:44
【问题描述】:

我在表单输入字段中插入了一个搜索图标。像这样

#searchform {
  position: relative;
}

#searchform:before {
  content: "\f118";
  font-family: "pharma";
  right: 0px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background: #387DD8;
  padding: 10px;
  color: #fff;
  width: 60px;
}
<form role="search" method="get" id="searchform" class="searchform" action="http://">
  <input type="search" id="s" name="s" value="" placeholder="Enter a product name" title="Press enter to search">
</form>

但是图标不可点击我想点击这个图标,就像提交表单到这个图标一样。这个怎么加?

【问题讨论】:

    标签: php html css wordpress search


    【解决方案1】:

    您需要一个提交字段来提交获取请求。

     <form role="search" method="get" id="searchform" class="searchform" action="http://">
         <input type="search" id="s" name="s" value="" placeholder="Enter a product name" title="Press enter to search">
         <input type="submit" id"submit">
     </form>
    

    然后您可以在 #submit 而不是 #searchform:before 上应用样式

    【讨论】:

      【解决方案2】:

      * {
          box-sizing: border-box;
          font-family: inherit;
      }
      
      html {
          font-size: 62.25%;
      }
      
      body {
          font-family: sans-serif;
          font-size: 1.6rem;
      }
      
      #searchform {
       position: relative;
       width: 500px;
       display: flex;
       justify-content: center;
       align-items: center;
      }
      
      #s {
          width: 90%;
          height: 100%;
          padding: .8rem;
          border-top-left-radius: .3rem;
          border-bottom-left-radius: .3rem;
          border: 1px solid dodgerblue;
          border-right-color: transparent; 
      }
      
      #submit {
          width: 10%;
          height: 100%;
          padding: .8rem;
          border-top-right-radius: .3rem;
          border-bottom-right-radius: .3rem;
          border: 0px;
          background: dodgerblue;
      }
      <form role="search" method="get" id="searchform" class="searchform" action="http://">
              <input type="search" id="s" name="s" value="" placeholder="Enter a product name" title="Press enter to search">
              <input type="submit" id="submit" value="?">
          </form>

      【讨论】:

        【解决方案3】:

        使用Font Awesome search icon,如下所示:

        #searchform {
          position: relative;
        }
        
        #submit {
          position: absolute;
          background: #387DD8;
          padding: 10px;
          color: #fff;
          width: 60px;
        }
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
        <form role="search" method="get" id="searchform" class="searchform" action="http://">
          <input type="search" id="s" name="s" value="" placeholder="Enter a product name" title="Press enter to search" />
          <button type="submit" id="submit">
            <i class="fas fa-search"></i>
          </button>
        </form>

        【讨论】:

        • @Sabbir 没问题。祝你好运!
        • 是的,我只是编辑你的 CSS 代码。有些项目不需要添加。
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-08-24
        • 2012-08-28
        • 2017-02-04
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多