html搜索框保留搜索记录,input搜索框记录

商品搜索

body,

html {

background-color: white;

width: 100%;

}

/* search-box start */

.search_box{

display: flex;

align-items: center;

padding:0.2rem;

justify-content: space-around;

}

.search_icon{

background-color:whitesmoke;

display: flex;

align-items: center;

height:0.4rem;

padding:0 0.1rem;

flex:1;

border-radius:0.25rem;

}

.icon-search-copy{

color:gray;

font-size:0.12rem;

}

input{

border:0px;

outline:none;

margin-left:0.1rem;

background-color:whitesmoke;

width:80%;//长宽不为百分之百是因为要空出父元素圆角的距离，100%的话样式就会变形

height:95%;

font-size: 0.14rem;

}

.search_text{

font-size: 0.15rem;

margin-left:0.1rem;

}

/* search-box end */

搜索

手写搜索框，涉及到rem单位转换适应不同设备，单独练习全文rem*100所得值为px单位

标签：flex,search,记录,color,搜索,rem,input,font,size

来源： https://blog.csdn.net/qq_43101834/article/details/113756953