CSS在输入框后添加图片

CSS 可以帮助我们在输入框后添加很多漂亮的图片，下面将会介绍如何使用 CSS 在输入框后添加图片。

.input-with-img {
    position: relative;
}
.input-with-img img {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}
    

以上代码会帮我们在输入框后添加一张图片，代码中的 .input-with-img 是我们添加图片的输入框的类名。

我们设置 .input-with-img 的 position 属性为 relative，这是为了让我们在输入框后添加的图片与输入框在同一个位置。

接下来我们设置 .input-with-img img 的 position 属性为 absolute，这是为了让图片的位置可以随意调整。

我们将图片的右侧距离输入框的距离设置为 5px，将图片的垂直方向上居中，这样我们添加的图片就会在输入框的后面且居中显示。

最后，我们需要将这张图片放置在 .input-with-img 中，在我们的 HTML 代码中可以添加如下代码。

div class="input-with-img">
    input type="text" />
    img src="img/icon.png" alt="icon">
    /div>
    

上面的代码中，我们添加了一个输入框和一张图片，图片的路径为 img/icon.png，用来代替样式中给出的 img。

这样我们就能够通过 CSS 在输入框后添加图片啦。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！