首页html写两个左侧带图标的白底输入框，图标在输入框内，图标是图片

html写两个左侧带图标的白底输入框，图标在输入框内，图标是图片

时间: 2024-12-17 15:47:02 浏览: 7

HTML中创建两个左侧带有图片图标的白色背景输入框，可以使用`<label>`元素配合`<input>`元素，并利用CSS来控制样式。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> /* CSS样式 */ .input-container { display: flex; align-items: center; /* 使图标与文本对齐 */ } input[type=text] { background-color: white; border: none; outline: none; width: calc(100% - 48px); /* 减去图标宽度 */ padding-left: 24px; /* 留出空间给图标 */ } input[type=text]:before { content: url('path_to_your_icon.png'); /* 替换为实际图片路径 */ position: absolute; top: 50%; left: 16px; transform: translateY(-50%); height: 24px; /* 图片高度，保持比例 */ } </style> </head> <body> <div class="input-container" id="input1"> <label for="inputText1"><img src="path_to_your_icon.png"></label> <input type="text" id="inputText1" placeholder="请输入内容"> </div> <div class="input-container" id="input2"> <label for="inputText2"><img src="path_to_your_icon.png"></label> <input type="text" id="inputText2" placeholder="请输入内容"> </div> </body> </html> ``` 在这个例子中，你需要将`path_to_your_icon.png`替换为你要使用的实际图片文件路径。每个`.input-container`里的`<input>`标签都包含了一个图标，图标会放在输入框左边，并且输入框本身有白色背景。

阅读全文