如何使用占位符文本在输入字段内添加图标

Question

How do I add an icon as the placeholder text inside an input field? The icon is placed outside of the input field. I tried moving it using padding and margin, but I can't seem to position it exactly where I want it.

Answer 1

Your best option is either using CSS Grid or Flexbox to center the icon within a wrapper element.

You can read more about Grid here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

And you can read more about Flexbox here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

Here is an example using Grid:

 body { background: #F5F5F6; } label { display: grid; grid-template: 1fr / auto 1fr; gap: 12px; border: 1px solid #CFD5DB; border-radius: 5px; background: #fafafa; padding: 12px; color: #6C757D; cursor: text; } label:focus-within { border: 1px solid #000; } label>input { outline: none; border: none; background: transparent; }

 <label> <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> <input placeholder="Enter Hotel name" type="search" /> </label>

A couple of important things to note about this example:

• I've used a label element to wrap the input . This gives us the behavior of clicking the icon to focus the input field without needing to use javascript.
• I've used input[type=search] because that is more semantically correct for your usage, and will aid users of screen readers in understanding the purpose of the text field.
• I've used the :focus-within pseudo-selector to target and style the label when its child input is focused.
• I've opted to use an svg icon but an img based icon will work just as well.
• I could've used Flexbox just as easily but I wanted to use the gap property on the wrapping label instead of setting a margin on the icon or input. gap also works with Flexbox the same way it does with Grid except that Safari only supports gap on Grid layouts. If you opt for the Flexbox method, use a margin on one of the child elements instead of gap .

Answer 2

Place the two inline controls (the image and the input ) into a container (eg a Div).

The container must be styled position:relative

Style the inline elements as position:absolute; top:0; left:0 position:absolute; top:0; left:0 position:absolute; top:0; left:0 , which will place them one-on-top-of-the-other. Then use z-index to decide which element is on top and which is below.

Then a bit of padding, so that the input text is pushed over to the right to make room for the image... and you have it.

The border-radius is not necessary - it only rounds the corners of the image.

 .iwi{ position:relative; } img,input{position:absolute;top:0;left:0;} input{ z-index:1; font-size:1.3rem; padding: 3px 5px; padding-left:25px; } img{ z-index:2; margin-top:7px; margin-left:3px; border-radius: 20px; }::placeholder{ color: #ddd; }

 <div class="iwi"> <img src="https://placekitten.com/20/20" /> <input type="text" placeholder="Name the kitten" /> </div>

Answer 3

If you are using bootstrap4/bootstrap5 you can do easily

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <div class="container"> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fas fa-search"></i> </div> </div> <input type="text" placeholder="search here" class="form-control" name="search" /> </div> </div>

Check this

Answer 4

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: dodgerblue;
  color: white;
  min-width: 50px;
  text-align: center;
}

.input-field {
  width: 100%;
  padding: 10px;
  outline: none;
}

.input-field:focus {
  border: 2px solid dodgerblue;
}

/* Set a style for the submit button */
.btn {
  background-color: dodgerblue;
  color: white;
  padding: 15px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.btn:hover {
  opacity: 1;
}
</style>
</head>
<body>

<form action="/action_page.php" style="max-width:500px;margin:auto">
  <h2>Register Form</h2>
  <div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="Username" name="usrnm">
  </div>

  <div class="input-container">
    <i class="fa fa-envelope icon"></i>
    <input class="input-field" type="text" placeholder="Email" name="email">
  </div>
  
  <div class="input-container">
    <i class="fa fa-key icon"></i>
    <input class="input-field" type="password" placeholder="Password" name="psw">
  </div>

  <button type="submit" class="btn">Register</button>
</form>

</body>
</html>