CODEWITHSUNDEEP
htmlcssinputsearchbar
Michael Lee
Michael Lee

Reputation: 89

Is there a way to align two input tags(with different types) in a div

I am trying to implement a simple search bar, where a user can type whatever they want to search and click to get results (I have not worked on rendering the results yet).

I used an <input type="text"> tag to get whatever the user is typing, and an <input type="submit"> tag for the user to click. I also used an image as a background for the <input type="submit"> tag.

However, the two input tags do not align as I would like them to. I set the background-color just to get a visualization of the div.

The questions I have:

  1. How can I align the two input tags, so that the border-bottom for both appears like one straight line?

  2. Is there a better way to implement the search bar? I've looked into datalist, button, etc. and am trying to find the best method.

  3. Currently, I have the height and width of the image fixed to the <input type="submit"> tag. Is there a way to decrease the size of the image in my HTML or do I have to keep a smaller image in the static folder?

Here is an image to display the issue: enter image description here

Here is my code:

.search-box-container {
  background-color: red;
  width: 300px;
  float: right;
}

.search-box {
  text-align: center;
}

.search-box form {
  font-size: 0;
}

.search-box form input {
  font-size: 20px;
  border: none;
  border-bottom: 3px solid black;
  display: inline-block;
  height: 52px;
}

.search-box form input[type=submit] {
  background: url('/static/search.png');
  background-repeat: no-repeat;
  width: 54px;
  height: 52px;
}
<div class="search_filter">
  <p>SEARCH FUNCTION AREA</p>
  <div class="search-box-container">
    <div class="search-box">
      <form method="post" action="#">
        <input type="text" name="search" id="textSearch" placeholder="Search">
        <input type="submit" name="submit" id="searchButton" value="">
      </form>
    </div>
  </div>
</div>

Upvotes: 0

Views: 80

Answers (4)

s1834
s1834

Reputation: 443

Try the attached code it will surely work. I have added display: flex; and align-items: flex-end;.

And I have a suggestion for you that use Viewport Units like vw and vh instead of px and % because it will help you make your webpage/website responsive. I have added an example in .search-box-container.

.search-box-container {
    width: 30vw;
    float: right;
}

.search-box {
    text-align: center;
}
.search-box form {
  font-size: 0;
  display: flex;
  align-items: flex-end;
}

.search-box input {
    font-size: 20px;
    border: none;
    border-bottom: 3px solid black;
    display: inline-block;
    height: 52px;
}

.search-box input[type=submit] {
    background: url('/static/search.png');
    background-repeat: no-repeat;
    width: 54px;
    height: 55px;
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div class="search_filter">
  <p>SEARCH FUNCTION AREA</p>
  <div class="search-box-container">
    <div class="search-box">
      <form method="post" action="#">
        <input type="text" name="search" id="" placeholder="Search">
        <input type="submit" name="submit" id="" value="">
      </form>
    </div>
  </div>
</body>
</html>

Upvotes: 0

Alarees Samer
Alarees Samer

Reputation: 93

try this :

.search-box-container {
    background-color: red;
    width: 300px;
    float: right;
}

.search-box {
    text-align: center;
}
.search-box form {
    font-size: 0;
}

.search-box form input {
    font-size: 20px;
    border: none;
    border-bottom: 3px solid black;
    display: inline-block;
    height: 52px;
    
}

.search-box form input[type=submit] {
    background: url('/static/search.png');
    background-repeat: no-repeat;
    width: 54px;
    height: 52px;
}
  .search-container {
  display:flex;
  align-items:flex-end;
}
<div class="search_filter">
    <p>SEARCH FUNCTION AREA</p>
    <div class="search-box-container">
      <div class="search-box">
        <form method="post" action="#">
        <div class="search-container">
          <input type="text" name="search" id="textSearch" placeholder="Search">
          <input type="submit" name="submit" id="searchButton" value="">
          </div>
        </form>
      </div>
    </div>
  </div>

Upvotes: 1

CubeDev
CubeDev

Reputation: 155

Try this code. Its just to align the input and the search icon aligned in an horizontal order.

HTML

<div class="search_filter">
  <p>SEARCH FUNCTION AREA</p>
  <div class="search-box-container">
    <div class="search-box">
      <form method="post" action="#">
        <input type="text" name="search" id="textSearch" placeholder="Search">
        <input type="submit" name="submit" id="searchButton" value="">
      </form>
    </div>
  </div>
</div>

CSS

.search-box-container {
    background-color: red;
    width: 300px;
    float: right;
}

.search-box {
    text-align: center;
}
.search-box form {
    font-size: 0;
}

.search-box form input {
    font-size: 20px;
    border: none;
    border-bottom: 3px solid black;
    display: inline-block;
    height: 52px;
    
}

.search-box form input[type=submit] {
    background: url('https://img.icons8.com/all/500/search--v1.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 54px;
    height: 52px;
}

/* My Styles */

form{
  display: flex;
}

Upvotes: 0

Hally
Hally

Reputation: 81

If all you want is to align the bottom border line, you can try doing this.

.search-box form {
    font-size: 0;
  
/*  i added these two lines of code  */
  display: flex;
  align-items: flex-end;
}

Upvotes: 1

Related Questions