如何通过CSS调整文本输入框背景图片(icon)尺寸而不改变输入框大小

问题原因 #

你给.sign_up_name类添加width属性修改的是输入框元素本身的宽度，CSS的背景图片尺寸默认使用原图尺寸，不会跟随元素尺寸自动调整，所以才会出现输入框缩小但背景图大小不变的情况。

解决方法 #

你需要通过background-size属性指定背景图片的尺寸，有两种常用写法：

1. 直接在background简写属性中补充尺寸参数
   注意background简写语法中，背景位置参数后需要用/分隔后再写背景尺寸：

.sign_up_name {
  /* 示例将背景图尺寸设为20px宽、20px高，可按需调整数值 */
  background: url(../images/name.png) no-repeat scroll 11px 13px / 20px 20px #f2f2f2 !important;
}

2. 单独添加background-size属性（更推荐，可读性更高）

.sign_up_name {
  background: url(../images/name.png) no-repeat scroll 11px 13px #f2f2f2 !important;
  /* 只设置宽度为20px，高度设为auto可保持原图宽高比，避免拉伸变形 */
  background-size: 20px auto !important;
}

内容的提问来源于stack exchange，提问作者Mr.M