[分享]css中将图片放在input右侧

CSS中可以通过一些技巧将图片放在input框的右侧，下面我们将介绍其中的两种方法。

/* 方法一：使用background-image */
input[type="text"] {
   padding: 10px 50px 10px 10px;    /* 设置input框内边距 */
   background-image: url("image.png");
   background-repeat: no-repeat;
   background-position: right center;
}

/* 方法二：使用position和float */
input[type="text"] {
   padding: 10px 10px 10px 10px;    /* 设置input框内边距 */
   position: relative;            /* 为input框设置相对定位 */
}

input[type="text"]::after {
   content: "";
   background-image: url("image.png");
   background-repeat: no-repeat;
   background-position: center center;
   width: 30px;
   height: 30px;
   position: absolute;          /* 为该元素设置绝对定位 */
   top: 50%;                  /* 设置该元素居中对齐 */
   right: 10px;
   transform: translateY(-50%); /* 使该元素相对于input框垂直居中 */
   float: right;               /* 将该元素浮动到右侧 */
} 

以上两种方法均可以实现将图片放在input右侧的效果，可以根据实际需要选择使用。需要注意的是，如果使用float方式，需要为input框设置足够的宽度以保证输入内容不会被遮挡。