CSS中可以通过一些技巧将图片放在input框的右侧,下面我们将介绍其中的两种方法。/* 方法一:使用background-image */ input[type= text ] { padding:
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框设置足够的宽度以保证输入内容不会被遮挡。
粉丝
0
关注
0
收藏
0