how to make a search bar with a search icon inside it-CodePudding

I'm currently learning the flexbox CSS concept, and I'm trying to create a navbar with it.

I want to make my search bar like this

And this is the picture of what I'm working on here

This is my html code

@font-face {
  font-family: "campton-bold";
  src: url(fonts/campton-cufonfonts/CamptonBold.otf) format("opentype");
}

@font-face {
  font-family: "campton-light";
  src: url(fonts/campton-cufonfonts/CamptonLight.otf) format("opentype");
}

@font-face {
  font-family: "campton-medium";
  src: url(fonts/campton-cufonfonts/CamptonMedium.otf) format("opentype");
}

* {
  margin: 0;
  padding: 0;
}

a img {
  width: 40px;
}

nav {
  background-color: #003466;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  height: 50px;
  align-items: center;
}

nav .btn-icon {
  display: flex;
  width: 20%;
  justify-content: space-around;
  /* background-color: black; */
}

nav .btn-icon a img {
  transition: transform 0.2s;
}

nav .btn-icon a img:hover {
  transform: scale(1.1);
}

.search-bar {
  display: flex;
  justify-content: center;
}

nav .search-bar input {
  border-radius: 20px;
  height: 35px;
  width: 370px;
  padding: 0 15px;
  box-sizing: border-box;
  font-family: campton-light;
  outline: none;
  border: none;
  font-size: 15px;
}

nav .search-bar a {
  text-decoration: none;
  display: flex;
  color: black;
  align-items: center;
  font-size: 20px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />

<nav>
  <div >
    <input type="text" placeholder="Search" name="search" />
    <a href="#"><i ></i></a>
  </div>

  <div >
    <div >
      <a href="#"><img src="img/message-01.png" alt="message" /></a>
    </div>

    <div >
      <a href="#"><img src="img/upload-01.png" alt="upload" /></a>
    </div>

    <div >
      <a href="#"><img src="img/bell-01.png" alt="notification" /></a>
    </div>

    <div >
      <a href="#"><img src="img/profile-01.png" alt="profile" /></a>
    </div>
  </div>
</nav>

I hope you can help me, thank you

CodePudding user response：

First Solution: design the outside/parent div

.search-bar {
    background: #fff;
    border-radius: 50px;
    padding-right: 17px;
}
.fa.fa-search {
color: #003466;
}
@font-face {
  font-family: "campton-bold";
  src: url(fonts/campton-cufonfonts/CamptonBold.otf) format("opentype");
}

@font-face {
  font-family: "campton-light";
  src: url(fonts/campton-cufonfonts/CamptonLight.otf) format("opentype");
}

@font-face {
  font-family: "campton-medium";
  src: url(fonts/campton-cufonfonts/CamptonMedium.otf) format("opentype");
}

* {
  margin: 0;
  padding: 0;
}


a img {
  width: 40px;
}

nav {
  background-color: #003466;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  height: 50px;
  align-items: center;
}

nav .btn-icon {
  display: flex;
  width: 20%;
  justify-content: space-around;
  /* background-color: black; */
}

nav .btn-icon a img {
  transition: transform 0.2s;
}

nav .btn-icon a img:hover {
  transform: scale(1.1);
}

.search-bar {
  display: flex;
  justify-content: center;
}

nav .search-bar input {
  border-radius: 20px;
  height: 35px;
  width: 370px;
  padding: 0 15px;
  box-sizing: border-box;
  font-family: campton-light;
  outline: none;
  border: none;
  font-size: 15px;
}

nav .search-bar a {
  text-decoration: none;
  display: flex;
  color: black;
  align-items: center;
  font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style2.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
  </head>
  <body>
    <nav>

      <div >
        <input type="text" placeholder="Search" name="search" />
        <a href="#"><i ></i></a>
      </div>

      <div >
        <div >
          <a href="#"><img src="img/message-01.png" alt="message" /></a>
        </div>

        <div >
          <a href="#"><img src="img/upload-01.png" alt="upload" /></a>
        </div>

        <div >
          <a href="#"><img src="img/bell-01.png" alt="notification" /></a>
        </div>

        <div >
          <a href="#"><img src="img/profile-01.png" alt="profile" /></a>
        </div>
      </div>
    </nav>
  </body>
</html>

The second solution:- Set parent div position relative and move search icon with position absolute.

.search-bar {
    position: relative;
}
.fa.fa-search {
    position: absolute;
    z-index: 999;
    right: 10px;
}

CodePudding user response：

You need position absolute.

Something like this would work: just add this to your code

.search-bar {
  position: relative; //the child will orientate on this parent

}
.search-bar a { // this a tag should include your image
  position: absolute; //so the a tag sits on top of the input
  bottom: 0; // distance from bottom (parent div)
  top: 0; // distance from top (parent div)
  right: 0.5rem; // distance from right (parent div)
}

Aswell you should add some padding to the right in your input-field, to prevent from input text being under the image.

Hope this helps you!

CodePudding user response：

here is working example

I just wrapped input and icon into label tag and changed some styles

@font-face {
  font-family: "campton-bold";
  src: url(fonts/campton-cufonfonts/CamptonBold.otf) format("opentype");
}

@font-face {
  font-family: "campton-light";
  src: url(fonts/campton-cufonfonts/CamptonLight.otf) format("opentype");
}

@font-face {
  font-family: "campton-medium";
  src: url(fonts/campton-cufonfonts/CamptonMedium.otf) format("opentype");
}

* {
  margin: 0;
  padding: 0;
}

a img {
  width: 40px;
}

nav {
  background-color: #003466;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  height: 50px;
  align-items: center;
}

nav .btn-icon {
  display: flex;
  width: 20%;
  justify-content: space-around;
  /* background-color: black; */
}

nav .btn-icon a img {
  transition: transform 0.2s;
}

nav .btn-icon a img:hover {
  transform: scale(1.1);
}

.search-bar {
  display: flex;
  justify-content:space-between;
}

nav .search-bar {
  border-radius: 20px;
  height: 35px;
  width: 370px;
  padding: 0 15px;
  box-sizing: border-box;
  outline: none;
  border: none;
  font-size: 15px;
  background: white;
}
 nav .search-bar input {
  all:unset;
  width:100%;
}

nav .search-bar a {
  text-decoration: none;
  display: flex;
  color: black;
  align-items: center;
  font-size: 20px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />

<nav>
  <label for="ii" >
    <input type="text" id="ii" placeholder="Search" name="search" />
    <a href="#"><i ></i></a>
  </label>

  <div >
    <div >
      <a href="#"><img src="img/message-01.png" alt="message" /></a>
    </div>

    <div >
      <a href="#"><img src="img/upload-01.png" alt="upload" /></a>
    </div>

    <div >
      <a href="#"><img src="img/bell-01.png" alt="notification" /></a>
    </div>

    <div >
      <a href="#"><img src="img/profile-01.png" alt="profile" /></a>
    </div>
  </div>
</nav>