如何在文本输入框左侧添加图片？_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在文本输入框左侧添加图片？

2025-10-26

浏览次数：次

返回列表

如何在文本输入框左侧添加图片？

本文将详细介绍如何使用 CSS 将图片放置在文本输入框的左侧。通过使用 CSS 伪元素 `:before` 和绝对定位，我们可以轻松地在输入框左侧创建一个包含图片的区域，并调整输入框的内边距，确保文本内容不会与图片重叠。本文提供详细的代码示例和步骤说明，帮助开发者快速实现这一效果。

在网页设计中，经常需要在文本输入框旁边添加一些装饰性的元素，例如图标或图片，以增强用户体验。本教程将介绍如何使用 CSS 将图片放置在文本输入框的左侧，提供清晰的步骤和代码示例。

实现方法：使用 CSS 伪元素 :before 和绝对定位

核心思路是利用 CSS 伪元素 :before 在 .infoBox 元素内部创建一个新的元素，并使用绝对定位将其放置在输入框的左侧。同时，需要调整输入框的 padding-left 属性，以确保输入框中的文本内容不会与图片重叠。

步骤详解：

设置 .infoBox 的 position 属性：

为了使伪元素能够相对于 .infoBox 进行定位，需要将 .infoBox 的 position 属性设置为 relative。

.infoBox {
    position: relative;
    display: flex; /* 保持原有的 flex 布局 */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

创建并样式化伪元素 :before：

使用 :before 伪元素在 .infoBox 元素之前创建一个新的元素。然后，设置该元素的 content 属性为空字符串，这是使用伪元素的必要步骤。
住哪网酒店预订程序城市专用版
住哪酒店分销联盟是住哪网提供的一个网络分销预订平台。加入该本台，您可以通过在您网站或博客上展示图片、文字链接或搜索框，只要通过您的展示预订并入住的订单，您将得到至少12元/间夜的佣金。　　加入条件非常宽松，如您经营的是商业性质还是个人性质的网站，可以通过本站提供的API接口，建立一个频道，一方面丰富网站内容，另一方面增加网站收入；如果您在其它网站上有博客，可以通过文字和图片链接，只要通过您的链接预
0 查看详情
```
.infoBox:before {
    content: '';
    background: url('your image url') center center no-repeat; /* 替换为你的图片URL */
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px 0 0 10px; /* 可选：添加圆角 */
}
```
- content: '';：这是使用伪元素的必要属性。
- background: url('your image url') center center no-repeat;：设置背景图片，your image url 需要替换为实际的图片 URL。center center no-repeat 用于控制图片的显示方式，使其居中显示且不重复。
- width 和 height：设置图片的宽度和高度。
- display: block;：将伪元素设置为块级元素，使其占据一定的空间。
- position: absolute;：使用绝对定位，将伪元素放置在 .infoBox 内部的指定位置。
- top 和 left：设置伪元素相对于 .infoBox 的顶部和左侧的偏移量。
- border-radius：可选属性，用于给图片添加圆角。
调整输入框的 padding-left 属性：

为了防止输入框中的文本内容与图片重叠，需要调整输入框的 padding-left 属性，使其留出足够的空间给图片。
```
.search {
    padding-left: 65px; /* 调整内边距，确保文本不与图片重叠 */
    background-color: #1d2c4c;
    border: none;
    border-radius: 10px;
    text-align: center;
    width: 500px;
    height: 50px;
    text-decoration: none;
}
```
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 in Input</title>
    <style>
        body {
            background-color: #141c2f;
        }

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

        .infoBox:before {
            content: '';
            background: url('your-image.png') center center no-repeat; /* 替换为你的图片URL */
            width: 50px;
            height: 50px;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 10px 0 0 10px;
        }

        .search {
            padding-left: 65px;
            background-color: #1d2c4c;
            border: none;
            border-radius: 10px;
            text-align: center;
            width: 500px;
            height: 50px;
            text-decoration: none;
            color: white; /* 添加文字颜色，使其可见 */
        }
    </style>
</head>
<body>
    <div class="infoBox">
        <input class="search" type="text" placeholder="Search..">
    </div>
</body>
</html>

注意事项：

请将代码中的 your-image.png 替换为实际的图片 URL。
可以根据实际情况调整 width、height、top、left 和 padding-left 等属性的值，以达到最佳的显示效果。
确保图片的格式和大小适合在输入框中显示。
如果需要支持响应式布局，可以使用相对单位（例如 %）来设置图片的宽度和高度。

总结：

通过使用 CSS 伪元素 :before 和绝对定位，可以轻松地在文本输入框的左侧添加图片。这种方法简单易用，并且具有很高的灵活性，可以根据实际需求进行定制。希望本教程能够帮助你解决在网页设计中遇到的问题。

以上就是如何在文本输入框左侧添加图片？的详细内容，更多请关注其它相关文章！

# 创建一个 # 论坛网站建设找谁投稿 # 新泰seo网站优化 # seo优化代码大全 # 温州专业seo推广机构 # 平湖网站优化排名 # 河南网站建设的市场费用 # 临湘抖音短视频seo # 深圳视频端seo推广 # 永春网站推广营销 # 眉山抖音seo咨询 # 显示效果 # 框中 # css # 您的 # 这是 # 酒店预订 # 表单 # 使其 # 输入框 # 绝对定位 # 响应式布局 # 网页设计 # 伪元素 # html

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：解决Flexbox布局中表单宽度超出容器的问题

下一篇：J*aScript：提交表单前移除输入框中的逗号

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

如何在文本输入框左侧添加图片？