如何在html中的输入占位符内放置一个图标？ [关闭]

【问题标题】：How to put an icon inside an input placeholder in html? [closed]如何在html中的输入占位符内放置一个图标？ [关闭]
【发布时间】：2020-11-04 09:44:50
【问题描述】：

被困了一个小时，Stack Overflow 上关于这个话题的问题似乎已经过时了

【问题讨论】：

嗨，Rookie，欢迎来到 SO！如果您希望 SO 的 ppl 为您提供帮助，您需要发布一个 minimal reproducible example 来说明您迄今为止所做的工作以解决您的问题。另外，检查这个答案：SO11757196

标签： html css

【解决方案1】：

希望我理解正确。

.middle_content_blog_content_blocks_search_edit{
    position: relative;
    background: url(https://www.pinpng.com/pngs/m/290-2908373_instagram-search-icon-gray-small-search-icon-png.png);
    background-repeat: no-repeat;
    background-position: 100% center;
    background-size: contain;
    width: 100%;
    height: 50px;
    font-size: 16px;
    border: 1px solid #878787;
    box-sizing: border-box;
    border-radius: 30px;
    outline: none;
    padding: 0 45px 0 20px;
    margin: 15px 0 0 0;
}

&lt;input type="text" class="middle_content_blog_content_blocks_search_edit" placeholder="text for search"&gt;

【讨论】：