一、实现效果
二、分析需求:
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设置
2.1type设置
2.2内置文字:placeholder(emoji可以直接输入)
2.3样式:圆角矩形 border-radius;
2.4logo图片设置
2.4.1插入用background里面的url
2.4.2调整背景图大小:background-size
2.4.3调整背景图位置:background-position:调整左右 调整上下;
2.4.4背景图片和input的背景色共存:只需要在background的url属性后添加背景色设置
2.4.5根据logo图片适当调整input的padding使之更美观
.search-input .wrapper input {
width: 250px;
height: 30px;
padding-left: 40px;
color: #9d9d9d;
border-radius: 20px; /* 圆角矩形效果 */
border: 0; /* 取消黑色外框 */
background: url(@/assets/img/search.png) no-repeat #f8f8f8; /* 实现png和背景色共存 */
background-size: 20px 20px; /* 背景图片大小 */
background-position: 10px; /* 背景图片定位:注意这里的第一个属性值是调整左右,第二个属性值是上下 */
}
效果图:
可以优化的地方:设置滚动字幕,出现不同的内置文字