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

Question

我的目标

要有一个搜索栏（这是一个 post 方法表单）和它的提交按钮 merged/fused 作为一个。像这样：

平台：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>

我做错了什么？

Answer 1

这里有 2 个问题：

第一项 .searchTerm 因为有边框所以比较高。要解决此问题，请添加：.searchTerm, searchButton { box-sizing: border-box }
要将两个元素 nextx 彼此正确对齐，只需使用 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>

Answer 2

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

第一 : 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>

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

Fuse or Merge of Search Button and Search Form

html

css

wordpress

elementor

我的目标

我有什么