input内加小图标

IT00123

已于 2022-07-15 08:40:56 修改

阅读量5.1k

点赞数 6

文章标签： html 前端

于 2022-07-15 08:34:11 首次发布

本文链接：https://blog.csdn.net/IT00123/article/details/125796435

版权

效果图

代码实现

<style>
        
        
        .box-centre {
           
            padding-left: 20px;
        }
        
        .box-centre input {
            background: url(img/iconfont-shouji.png) no-repeat 4px 1px;
            background-size: 6%;
            padding-left: 28px;
            width: 320px;
            height: 25px;
            border-radius: 5px;
            border: 1px solid #999;
        }
        
        .box-centre .input2 input {
            background: url(img/iconfont-duanxin.png) no-repeat 3px 1px;
            background-size: 10%;
            padding-left: 28px;
            width: 203px;
            margin-right: 5px;
        }
        
        .box-centre .input2 button {
            height: 30px;
        }
    </style>
</head>

<body>
    
        <div class="box-centre">
            <p> <input type="text" value="" placeholder="您的手机号"></p>
            <p class="input2"><input type="text" value="" placeholder="短信验证码"><button>获取动态验证码</button></p>

        </div>
    
</body>

</html>

.box-centre {

padding-left: 20px;

}

是让input内文字与边框距离间隔20px