input搜索框记录

2021-02-08 15:05:34 阅读：219 来源： 互联网

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"">
    <title>商品搜索</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2367085_9vawwsb6io.css">
    <style>
        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 */
    </style>
</head>
<body>
    <div class="search_box">
        <div class="search_icon">
            <div class="iconfont icon-search-copy"></div>
            <input type="text" placeholder="搜索商品">
        </div>
        <div class="search_text">搜索</div>
    </div>
    <script src="../js/rem.js"></script>
    </body>

</html>

在这里插入图片描述

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

标签：flex,search,记录,color,搜索,rem,input,font,size
来源： https://blog.csdn.net/qq_43101834/article/details/113756953

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

input搜索框记录