将图片放置于文本输入框左侧的终极指南-html教程-PHP中文网

将图片放置于文本输入框左侧的终极指南

心靈之曲

发布： 2025-10-26 11:49:18

原创

768人浏览过

将图片放置于文本输入框左侧的终极指南

本文将详细介绍如何通过CSS将图片放置在文本输入框的左侧。我们将探讨使用`:before`伪元素来实现这一目标的方法，并提供详细的代码示例和步骤说明，帮助你轻松掌握这种布局技巧，从而提升用户界面美观性和用户体验。

在网页设计中，经常需要在文本输入框旁边添加图标或图片，以增强用户体验或提供视觉提示。本文将重点介绍如何使用 CSS 将图片放置在文本输入框的左侧，并提供清晰的步骤和代码示例。

核心思路：使用:before伪元素

我们可以利用 CSS 的 :before 伪元素，在 infoBox 元素之前插入一个包含图片的元素。通过绝对定位，可以将该图片放置在输入框的左侧。

具体步骤

为 infoBox 添加相对定位：

首先，需要确保 infoBox 元素具有 position: relative; 属性。这将作为 :before 伪元素绝对定位的参考。

.infoBox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative; /* 关键：添加相对定位 */
}

登录后复制

创建 :before 伪元素并设置样式：

使用 :before 伪元素插入图片。设置 content: ''; 以使其可见，并使用 background 属性设置图片 URL。调整 width、height 和 border-radius 以适应你的设计。

左手医生开放平台
左医科技医疗智能开放平台

26

查看详情
```
.infoBox:before {
    content: '';
    background: url('your-image-url.png') center center no-repeat; /* 替换为你的图片URL */
    background-size: cover; /* 可选：调整图片大小 */
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px 0 0 10px; /* 可选：添加圆角 */
}
```
登录后复制
- content: '';：这是必须的，否则伪元素不会显示。
- background: url('your-image-url.png') center center no-repeat;：设置背景图片，并使其居中显示，不重复。将 your-image-url.png 替换为你的图片路径。
- background-size: cover;：可选属性，用于调整图片大小，使其覆盖整个区域。
- width 和 height：设置图片区域的宽度和高度。
- display: block;：将伪元素设置为块级元素，使其占据一定的空间。
- position: absolute;：将伪元素设置为绝对定位，以便可以相对于 infoBox 进行定位。
- top 和 left：设置伪元素相对于 infoBox 的位置。
- border-radius：可选属性，用于添加圆角。
调整输入框的 padding-left：

为了避免图片遮挡输入框中的文字，需要调整输入框的 padding-left 属性。
```
.search {
    background-color: #1d2c4c;
    border: none;
    border-radius: 10px;
    text-align: center;
    width: 500px;
    height: 50px;
    text-decoration: none;
    padding-left: 65px; /* 关键：添加左内边距 */
}
```
登录后复制
padding-left 的值应略大于图片的宽度，以确保文字不会与图片重叠。

完整代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Input Example</title>
    <style>
        body {
            background-color: #141c2f;
        }

        .infoBox {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .infoBox:before {
            content: '';
            background: url('your-image-url.png') center center no-repeat;
            background-size: cover;
            width: 50px;
            height: 50px;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 10px 0 0 10px;
        }

        .search {
            background-color: #1d2c4c;
            border: none;
            border-radius: 10px;
            text-align: center;
            width: 500px;
            height: 50px;
            text-decoration: none;
            padding-left: 65px;
        }
    </style>
</head>
<body>
    <div class="infoBox">
        <input class="search" type="text" placeholder="Search..">
    </div>
</body>
</html>

登录后复制

注意事项