CSS: установить встроенный элемент внутри отступа

Question

Я смотрю на сайте Instagram.Я заметил, что они поместили значок увеличения внутри отступа смежного ввода.Интересно, как это сделать, может кто-нибудь показать мне пример

Спасибо.

Answer 1

Ответ заключается в том, что они на самом деле не помещают значок в поле ввода. Просто нарисуйте прямоугольник вокруг значка и <input>. Сам значок добавляется к <span> в строке сразу после выделенного <input> на изображении в вопросе. Ищите класс coreSpriteSearchIcon.

Когда я проверил, что <span>, я увидел, что применяются следующие стили:

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;

background-image - это файл спрайта (изображение, содержащее несколько небольших изображений). background-size убедитесь, что изображение не растянуто. background-position говорит вам, где найти значок поиска в увеличенном изображении спрайта. И, width и height говорят вам, сколько изображения отображать.

Они смогли разместить его там, где он есть, используя absolute позиционирование:

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

Answer 2

Одним из способов достижения этого является использование position: absolute и помещение ввода в оболочку. Позвольте мне показать вам:

.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>

Итак, в основном мы используем position: relative для перемещения img относительно него. Также обратите внимание, что вам нужно добавить дополнительные padding (в данном случае слева), чтобы текст не перекрывался с иконкой.

Есть много способов сделать то же самое: position: relative, отрицательный margin, background-image, использование псевдоэлементов, но абсолютное позиционирование, на мой взгляд, наиболее семантически правильно.

Answer 3

Вот пример для jQuery поля поиска на иконке скрытия фокуса в соответствии с вашей ссылкой. Я надеюсь, что этот ответ будет полезным.

$('.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>