How to position an icon inside an input field in CSS-CodePudding

I have created an input field like so:

.search-bar {
  max-width: 400px;
  margin: 20px 50px;
  border: none;
}

#searchBarInput {
  position: relative;
  background: transparent;
  padding: 12px 24px;
  border-radius: 8px;
  border: 2px solid black;
  width: 100%;
}

.search-bar__icon {
  position: absolute;
  height: 100%;
  width: 32px;
  right: 10px;
  top: 5px;
}

<!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
      href="https://fonts.googleapis.com/icon?family=Material Icons"
      rel="stylesheet"
    />
    <link href="example.css" rel="stylesheet" />
  </head>
  <body>
    <div  id="searchBar">
      <input type="text" placeholder="Search User" id="searchBarInput" />
      <i >search</i>
    </div>
  </body>
</html>

I am trying to display the search-icon inside the input field. I was really thinking to achieve this with the help of the position-argument, but I didn't: The icon is at the top right corner of my screen. Just as a side note: The input field seems to be larger than 400px as well.

CodePudding user response：

An element with position: absolute is positioned relative to the nearest positioned ancestor (an element which it's position is not static. Please consider that all HTML elements has position static by default).

However; if an absolute positioned element has no positioned ancestors, it uses the document body(like your icon element).

So your problem will solve with just set the postion of .search-bar relative.

search-bar {
  ...
  position: relative;
}

CodePudding user response：

If you want to use just Material Design icons, [https://material.io/develop/web/supporting/text-field-icon] shows to import their CDN's and use their label/span classes.

<!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 href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet" />
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet" />
  <link href="style,css" rel="stylesheet" />
</head>
<body>
  <label >
      <span >
        <span ></span>
        <span > </span>
        <span ></span>
      </span>
      <i  tabindex="0" role="button">clear</i>
      <input  type="text" aria-labelledby="my-label-id" />
      <i >search</i>
    </label>

  <label >
      <span >
        <span ></span>
        <span > </span>
        <span ></span>
      </span>
      <i >search</i>
      <input  type="text" aria-labelledby="my-label-id" />
      <i  tabindex="0" role="button">clear</i>
    </label>
</body>

</html>

CodePudding user response：

This can be achieved using font-awesome and adding a class to the i class to position the search icon inside the input field. In this example, I made a sample class called .position to position the search icon. You can also expand on this by using a tag on your icon to act as a search button. Please see the changes I made to your HTML and CSS.

.search-bar {
    max-width: 400px;
    margin: 20px 50px;
    border: none;
    padding: 17px;
    position: relative;
}

#searchBarInput {
    position: relative;
    background: transparent;
    padding: 12px 24px;
    border-radius: 8px;
    border: 2px solid black;
    width: 100%;
}


.position {
  position: relative;
  left: 21rem;
  top: -2.3rem;
}

<!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 href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
    <link href="example.css" rel=stylesheet>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
</head>
<body>
    <div  id="searchBar">
        <input type="text" placeholder="Search User" id="searchBarInput">
        <i ></i>
    </div>
</body>
</html>

CodePudding user response：

you can use this style to achieve what you want

.search-bar {
  max-width: 400px;
  margin: 20px 50px;
  border: none;
  position: relative;
}

#searchBarInput {
  background: transparent;
  padding: 12px 24px;
  border-radius: 8px;
  border: 2px solid black;
  width: 100%;
}

.search-bar__icon {
  position: absolute;
  height: 100%;
  left: 105%;
  top: 25%;
}