Is there a way to put the search button in the textbox?-CodePudding

Is there a way to put the search button in the query box? I've searched for a solution, but those answers are very confusing. Also I would like it to be responsive. Thanks!

Also here's the website: https://newtabb.gq

And here's the source code: https://replit.com/@Hyderite/newtabb

HTML Code:

    <div >
      <input type="text" placeholder="Enter your search query here..." id="query" />
      <button id="search-btn">
        <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
        </svg>
      </button>
    </div>

CSS:

#query {
  width: auto;
  min-width: 325px;
  height: 35px;
  border-radius: 20px;
  border: #d4d4d4 1px solid;
  padding-left: 20px;
  padding-right: 20px;
  display: inline-block;
  margin-top: 10px;
  vertical-align: middle;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

#query:active {
  border: #b3b3b3 1px solid;
}

#search-btn {
  position: relative;
  width: 35px;
  height: 35px;
  border-radius: 100%;
  padding-top: 5px;
  margin-top: 10px;
  z-index: 10;
}

#search-btn:focus {
  outline: none;
}

.search-container {
  display: inline-block;
}

CodePudding user response：

There are a lot of ways to do so, but you may use this simple solution Check out the snippet.

I wrapped the input and the button inside a div

and gave the div a position relative

and max-content for width and height so it match the size of the content (input in this case)

I gave it a display flex and align-items center just to center button vertically.

I removed the position absolute from the input and changed button position to absolute and set right to 3px by testing to get the best position.

Finally I set margin-inline of auto to the div I created to center it.

I tried to make things clear in the code, I hope it helps you.

#query {
  width: auto;
  min-width: 325px;
  height: 35px;
  border-radius: 20px;
  border: #d4d4d4 1px solid;
  padding-left: 20px;
  padding-right: 20px;
  display: inline-block;
  margin-top: 10px;
  vertical-align: middle;
  /*position: absolute;*/ /* removed line */
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

#query:active {
  border: #b3b3b3 1px solid;
}

#search-btn {
  position: absolute;/* changed line */
  width: 35px;
  height: 35px;
  border-radius: 100%;
  padding-top: 5px;
  margin-top: 10px;
  z-index: 10;
  right:3px;/* New line */
}

#search-btn:focus {
  outline: none;
}

.search-container {
  display: inline-block;
}
.search-wrapper{
  display:flex;/* New line */
  align-items:center;/* New line */
  width:max-content;/* New line */
  height:max-content;/* New line */
  position:relative;/* New line */
  margin-inline:auto;/* New line */
}

    <div >
    <div >
      <input type="text" placeholder="Enter your search query here..." id="query" />
      <button id="search-btn">
        <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
        </svg>
      </button>
      </div>
    </div>

CodePudding user response：

flex is here to rescue.

note: search-cotnainer i have also corrected the spelling of container.

HTML

<div >
     <div > <input type="text" placeholder="Enter your search query here..." id="query">
      <button id="search-btn">
        <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
        </svg>
      </button>
    </div>
</div>

CSS

.search-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 8px;
    
}
.search-container-item {
    border: 1px solid gray;
    border-radius: 100px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
}
#query {
    min-width: 325px;
    height: 35px;
    border-radius: 20px;
    border: none;
    padding: 4px 8px;
}
#search-btn {
    width: 35px;
    height: 35px;
    border-radius: 100%;
}