Input标签的样式设置

目录

在input插入iconfont

在input中使用精灵图

input复选框设置边框颜色

---

在input插入iconfont

用背景图片，然后设置input框的left-padding，使得内容刚好被挤到图片后面

在input中使用精灵图

使用div嵌套，利用背景图片定位到图片

<style>    
    .box{
        width:300px;
        height:48px;
    }
    .box div{
        width:44px;
        height:44px;
        vertical-align:middle;
        display:inline-block;
        background-image:url(精灵图路径);
        background-position: -284px -79px;/*选择在精灵图中的位置*/
    }
    input{
        outline:none;/*去除轮廓线*/
        border:0px;
        vertical-align:middle;
        
    }
</style>

<div class="box">
    <div></div>
    <input type="text" placeholder="请输入用户名">
</div>

input复选框设置边框颜色

<style>
    input[type='checkbox']{
        cursor: pointer;
        position: relative;
       /* width: 16px;
        height: 16px; */
    }
    input[type='checkbox']::after{
        position: absolute;
        top:0;
        background-color: white;
        width: 16px;
        height: 16px;
        content:' ';/*这里有空格*/
        display: inline-block;
        text-align:center;
        border:1px solid red;
    }
    input[type='checkbox']::after{
        content:'√';
        font-size: 12px;
        font-weight: blod;
        color: red;
    }
</style>
<input type="checkbox">