一、实现效果
二、分析需求:
1.圆角矩形文本框
2.左侧有一个搜索的小logo
3.内置有emoji和文字
三、实现思路
1.采用子绝父相定位
如果想将元素定位在一个具体的范围之内,又想让这个元素的位置可以随意调整,可以使用子绝父相(参考网址:关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置))
因为input内不能直接插入img,用背景图片的形式比较难调整css样式(个人想法),所以这里采用子绝父相的遮眼法把搜索logo置入input之中,后面也方便调整样式
<div class="search-input">
<div class="wrapper">
<input type="text"
placeholder="🔥居家防疫必备"
class="search">
</div>
</div>
2.input