一、实现效果
![]()
二、分析需求:
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

本文通过CSS实现一个带有搜索图标、圆角矩形边框和内置emoji文字的输入框。利用子绝父相定位将搜索logo置于input内部,并详细介绍了如何设置input的type、placeholder、border-radius、background属性来调整样式和添加背景色。
最低0.47元/天 解锁文章
1927

被折叠的 条评论
为什么被折叠?



