My Goal

To have a search bar (which is a post method form) and its submit button merged/fused as one. Like this:

• Platform: WordPress
• Builder: Elementor (Pro)
• Widget: Custom HTML

What I Have

I have tried (with my limited knowledge) and this is what I am sitting with:

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

What am I doing wrong?

CodePudding user response：

2 issues here:

1. The first item .searchTerm is heigher because of the border. To fix that, add: .searchTerm, searchButton { box-sizing: border-box }
2. To align the both elements correctly nextx to each other, simply use 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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can solve this problem in more than one ways.

First : Put icon inside input element in a form

and more but my solve is here =>

1. your input and button component must have parent element.
2. the css solution is here

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

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>