Question 101604 in Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Fuse or Merge of Search Button and Search Form

My Goal

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

Search bar with fused or merged submit button

  • 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:

Search bar with disconnected submit button

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

What am I doing wrong?

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search