HTML5 Image Icon to Input Placeholder

HTML5 image icon to input placeholder

1. You can set it as background-image and use text-indent or a padding to shift the text to the right.
2. You can break it up into two elements.

Honestly, I would avoid usage of HTML5/CSS3 without a good fallback. There are just too many people using old browsers that don't support all the new fancy stuff. It will take a while before we can drop the fallback, unfortunately :(

The first method I mentioned is the safest and easiest. Both ways requires Javascript to hide the icon.

CSS:

input#search {
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    text-indent: 20px;
}

HTML:

<input type="text" id="search" name="search" onchange="hideIcon(this);" value="search" />

Javascript:

function hideIcon(self) {
    self.style.backgroundImage = 'none';
}

---

September 25h, 2013

I can't believe I said "Both ways requires JavaScript to hide the icon.", because this is not entirely true.

The most common timing to hide placeholder text is on change, as suggested in this answer. For icons however it's okay to hide them on focus which can be done in CSS with the active pseudo-class.

#search:active { background-image: none; }

Heck, using CSS3 you can make it fade away!

http://jsfiddle.net/2tTxE/

---

November 5th, 2013

Of course, there's the CSS3 ::before pseudo-elements too. Beware of browser support though!

            Chrome  Firefox     IE      Opera   Safari
:before     (yes)   1.0         8.0     4       4.0
::before    (yes)   1.5         9.0     7       4.0

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

How can i add icon in placeholder

Please check this link JsFiddle

HTML:

<!-- Search, search, search and search! -->
<input type="search" name="search" placeholder="search" rel="search" />

CSS:

input {
    background-image: url(https://cdn4.iconfinder.com/data/icons/round-mobile-ui-set/512/letter-message-email-mail-20.png);
    background-position: 10px center;
    background-repeat: no-repeat;
    border: 1px solid #ccc;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;

    padding: 10px 5px 10px 20px;
    text-indent: 20px;

    -webkit-transition: all 0.2s;
    -moz-transition: all 2s;
    transition: all 0.2s;

    width: 200px;
}

How to add awesome icon in placeholder,
Please check this jsFiddle

How to add icon inside the input field with the placeholder text

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>

Put icon inside input element in a form

The site you linked uses a combination of CSS tricks to pull this off. First, it uses a background-image for the <input> element. Then, in order to push the cursor over, it uses padding-left.

In other words, they have these two CSS rules:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

How to add an icon right before the placeholder in textarea

It is not possible to combine an icon and text in a placeholder. Because you are only able to use 1 font in it. If you could use different fonts inside the placeholder then this would be possible by using fontAwesome.

You can add a span (positioned inside the textarea) and shift the placeholder to the right of the icon by doing this:

HTML (added span in your code):

<div class="center-part">
  <div class="user-input">
     <textarea class="share" name="share" type="text" placeholder="  Icon before this"></textarea>
<span class="icon"></span>
  </div>            
</div>

CSS:

.center-part {
  position: relative;  
  min-height: 50px;
  min-width: 200px;
}

.share {
  min-height: 50px;
  min-width: 200px;
}

.icon {
  position: absolute;
  background: red;
  width: 15px;
  height: 15px;
  left: 10px;
  top: 5px;
}

You can see a demo at Codepen

Use Font Awesome Icon in Placeholder

You can't add an icon and text because you can't apply a different font to part of a placeholder, however, if you are satisfied with just an icon then it can work. The FontAwesome icons are just characters with a custom font (you can look at the FontAwesome Cheatsheet for the escaped Unicode character in the content rule. In the less source code it's found in variables.less The challenge would be to swap the fonts when the input is not empty. Combine it with jQuery like this.

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder=""/>
  </div>
</form>

With this CSS:

input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

And this (simple) jQuery

$('#iconified').on('keyup', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

The transition between fonts will not be smooth, however.

Image in placeholder html?

If you only need to support the latest Browser use this:

HTML:

<input placeholder="Google Custom Search" type="search" name="q">

CSS:

#myInput::-webkit-input-placeholder {
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x20");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#myInput::-moz-placeholder {
  /* Firefox 19+ */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x20");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#myInput:-moz-placeholder {
  /* Firefox 18- */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x20");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#myInput:-ms-input-placeholder {
  /* IE 10- */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x20");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}

JSFiddle

Browser Support

How do I make a placeholder image in HTML if the original image hasn't been found?

If you specify the width and height of an image in the css, you can set the background image as a not-found image:

img {  width:100px;  height:100px;  background: url(http://goo.gl/vyAs27) no-repeat scroll 0 0;}

<img src="not-found.png" /><img src="http://goo.gl/ijai22" />

---

Related Topics