How to position an icon inside an input field in CSS

user_11225028 0
Viewed 346

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 class="search-bar" id="searchBar">
      <input type="text" placeholder="Search User" id="searchBarInput" />
      <i class="material-icons search-bar__icon">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.

css
3 Answers

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;
}
user_119779290

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 class="search-bar" id="searchBar">
        <input type="text" placeholder="Search User" id="searchBarInput">
        <i class="fas fa-search position"></i>
    </div>
</body>
</html>

user_164963570

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 class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__notch"> </span>
        <span class="mdc-notched-outline__trailing"></span>
      </span>
      <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">clear</i>
      <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" />
      <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">search</i>
    </label>

  <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__notch"> </span>
        <span class="mdc-notched-outline__trailing"></span>
      </span>
      <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">search</i>
      <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" />
      <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">clear</i>
    </label>
</body>

</html>

user_38467550
Related