html - CSS:在填充内设置内联元素

Question

我正在查看 Instagram 网站。我注意到他们在相邻输入的填充内放置了一个缩放图标。我想知道这是怎么做到的，谁能给我举个例子

谢谢。

Answer 1

根据您的引用，这是焦点显示隐藏图标上的 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>