搜索按钮和搜索表单的融合或合并

Posted 2023-03-05

【中文标题】搜索按钮和搜索表单的融合或合并

【英文标题】：Fuse or Merge of Search Button and Search Form

【发布时间】：2021-12-03 11:05:53

【问题描述】：

我的目标

有一个搜索栏（这是一个发布方法表单）和它的提交按钮合并/融合为一个。像这样：

平台：WordPress 生成器：Elementor（专业版） 小部件：自定义 html

我有什么

我已经尝试过（以我有限的知识），这就是我所坐的：

.domSearchWrap 
  position: relative;
  display: inline;


.domSearchWrap .searchTerm 
  border: 3px solid #0a7c82;
  border-right: none;
  border-radius: 20px 0px 0px 20px;
  outline: none;
  color: #0a7c82;
  height: 60px;


.searchTerm:focus 
  outline: none;


.domSearchWrap .searchButton 
  width: 40px;
  height: 60px;
  border: 1px solid #0a7c82;
  background: #0a7c82;
  text-align: centre;
  border-radius: 0px 20px 20px 0px;

<div class="domSearchWrap">
  <div class="domSearch">
    <form action="https://XX.XXXX.com/cart.php?a=add&domain=register" method="post">
      <input type="text" class="searchTerm" placeholder="Type your desired domain name here..." name="query">
      <button type="submit" class="searchButton">
                  <i class="fa fa-search"></i>
            </button>
    </form>
  </div>
</div>

我做错了什么？

【参考方案1】：

您可以通过多种方式解决此问题。

第一：Put icon inside input element in a form

还有更多，但我的解决方案在这里 =>

您的输入和按钮组件必须有父元素。 css 解决方案在这里

.domSearchWrap 
  position: relative;
  display: inline;


.parent  /* */
  display:flex;
  align-items:center;

.domSearchWrap .searchTerm 
    border: 3px solid #0a7c82;
    border-right: none;
    border-radius: 20px 0px 0px 20px;
    outline: none;
    color: #0a7c82;
    height: 60px;

.searchTerm:focus 
    outline: none;


.domSearchWrap .searchButton 
    width: 40px;
    height: 68px; /*   */
    border: 1px solid #0a7c82;
    background: #0a7c82;
    text-align: center;
    border-radius: 0px 20px 20px 0px;

<div class="domSearchWrap">
    <div class="domSearch">
        <form action="https://XX.XXXX.com/cart.php?a=add&domain=register" method="post">
            <div class="parent">
            <input type="text" class="searchTerm" placeholder="Type your desired domain name here..." name="query">
            <button type="submit" class="searchButton">
                    <i class="fa fa-search"></i>
            </button>
            </div> 
        </form>
    </div>
</div>

【讨论】：

成功了——非常感谢。我只需要在以下代码中添加最后一行：``` .domSearchWrap .searchButton width: 40px;高度：68px； /* */ 边框：1px 实心 #0a7c82;背景：#0a7c82；文本对齐：居中；边框半径：0px 20px 20px 0px； ```

【参考方案2】：

这里有 2 个问题：

第一项.searchTerm 由于边框而更高。要解决此问题，请添加：.searchTerm, searchButton box-sizing: border-box 要正确对齐两个元素，只需使用 flexbox：.domSearch form display: flex;

.domSearch form 
  display: flex;


.searchTerm,
.searchButton 
  box-sizing: border-box;



/* minimal necessary original CSS */

.domSearchWrap .searchTerm 
  border: 3px solid #0a7c82;
  border-right: none;
  border-radius: 20px 0px 0px 20px;
  outline: none;
  color: #0a7c82;
  height: 60px;


.searchTerm:focus 
  outline: none;


.domSearchWrap .searchButton 
  width: 40px;
  height: 60px;
  border: 1px solid #0a7c82;
  background: #0a7c82;
  text-align: center;
  border-radius: 0px 20px 20px 0px;

<div class="domSearchWrap">
  <div class="domSearch">
    <form action="https://XX.XXXX.com/cart.php?a=add&domain=register" method="post">
      <input type="text" class="searchTerm" placeholder="Type your desired domain name here..." name="query">
      <button type="submit" class="searchButton">
                  <i class="fa fa-search"></i>
            </button>
    </form>
  </div>
</div>