CSS: Set Inline element inside padding

Question

I am looking at the Instagram website. I notice that they put a zoom icon inside the padding of adjacent input. I wonder how this is done, can somebody show me an example

Thanks.

Possible duplicate of [Put icon inside input element in a form (not as background image!)](https://stackoverflow.com/questions/20634868/put-icon-inside-input-element-in-a-form-not-as-background-image) — Aniket G, Mar 18 '19 at 01:33
since you already opened console why not just took at how they did it? from what i saw they used position absolute to place it there — Chris Li, Mar 18 '19 at 02:54

score 0 · Answer 1 · answered Mar 18 '19 at 02:41

Here is the example for jQuery search box on focus show hide icon as per your reference. I hope this answer will be helpful.

$('.btn-close').hide();
$('.fa-search').show();
$('.input-text').on('focus', function() {
    $(this).siblings('.btn-close').show();
    $(this).siblings('.fa-search').hide();
});
$('.btn-close').click(function(e) {
    $('.fa-search').show();
    $('.btn-close').hide();
    e.stopPropagation();
});
$('.input-text').on('focusout', function() {
    $(this).siblings('.btn-close').hide();
    $(this).siblings('.fa-search').show();
});

.input-text {
    border: 1px solid #888;
    min-height: 40px;
    font-size: 16px;
    padding: 0 25px 0 5px;
}

.input-box {
    position: relative;
    display: inline-block;
}

.input-box .fas,
.btn-close {
    position: absolute;
    right: 0;
    padding: 11px 4px;
    top: 0;
    color: #888;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="input-box">
    <input type="text" class="input-text" placeholder="text">
    <i class="fas fa-search"></i>
    <a class="btn-close" href="#"><i class="fas fa-times-circle"></i></a>
</div>

score 0 · Answer 2 · answered Mar 18 '19 at 02:46

The answer is that they don't actually put the icon inside the input box. The just draw a rectangle around both the icon and the <input>. The icon itself is added to the <span> on the line right after the highlighted <input> in the image in the question. Look for the class coreSpriteSearchIcon.

When I inspected that <span>, I saw these styles applied:

background-image: 
  url(/static/bundles/metro/sprite_core_2x_6ba81dcece9b.png/6ba81dcece9b.png);
}

background-size: 410px 396px;
background-position: -240px -366px;

height: 10px;
width: 10px;

The background-image is the sprite file (an image containing multiple smaller images). background-size ensure that the image isn't stretched. background-position tells you where to find the search icon within the larger sprite image. And, width and height tell you how much of the image to display.

They were able to place it where it is by using absolute positioning:

left: 11px;
position: absolute;
top: 9px;
z-index: 2;

score 0 · Answer 3 · answered Mar 18 '19 at 02:50

One of the way to achieve this is to use position: absolute and put input into a wrapper. Let me show you:

.input-wrapper {
  position: relative;
}

.input-wrapper img {
  position: absolute;
  top: 5px;
  left: 5px;
}

input {
  height: 40px;
  width: 200px;
  padding-left: 35px;
  
  font-size: 20px;
  
  box-sizing: border-box;
}

<div class="input-wrapper">
  <img src="https://picsum.photos/30"/>
  <input type="text" />
</div>

So basically we use position: relative to move img relatively to it. Also note, that you have to add extra padding(left one in this case) so text won't overlap with icon.

There are a lot of ways to do the same: position: relative, negative margin, background-image, utilising of pseudo-elements, but absolute positioning is the most semantically correct in my opinion.

CSS: Set Inline element inside padding

3 Answers3