将图标放入表单中的输入元素内（不是背景图片！）[关闭]

Posted 2023-03-15

【中文标题】将图标放入表单中的输入元素内（不是背景图片！）[关闭]

【英文标题】：Put icon inside input element in a form (not as background image!) [closed]

【发布时间】：2014-01-05 06:10:35

【问题描述】：

我想完全按照这里的要求做：

Put icon inside input element in a form

除了我想让图标右对齐。

“背景”解决方法不起作用，因为这些图像必须是可点击的！所以它一定是一个IMG。

我该怎么做？

【问题讨论】：

为输入和图像创建一个包装器 div，给包装器 div 的相对位置和图像的绝对位置

【参考方案1】：

没有背景图片的解决方案：

JSFiddle.

#input_container  
    position:relative;
    padding:0;
    margin:0;

#input  
    height:20px;
    margin:0;
    padding-left:30px;

#input_img 
    position:absolute;
    bottom:8px;
    left:10px;
    width:10px;
    height:10px;

<div id="input_container">
    <input type="text" id="input" value>
    <img src="https://cdn1.iconfinder.com/data/icons/CornerStone/PNG/arrow%20right.png" id="input_img">
</div>

【讨论】：

在示例的输入中添加了左填充，因此您无法在图像上键入 -> jsfiddle.net/2pbtB/1

padding-left 在 IE 8 上工作，但只要我输入一个长输入，它就会向左移动并在图像上输入！

非常感谢，它节省了我的时间...

【参考方案2】：

您可以使用 div 作为包装器，包含图像和输入字段，并使用绝对位置将图像放置在其中覆盖输入字段的位置。

HTML

<div>
    <img src="http://static4.wikia.nocookie.net/__cb20131121214007/destinypedia/images/7/71/Information_Icon.svg" >
    <input type="text">
</div>

CSS

div 
    height:30px;
    width:300px;
    position:relative;


img 
    height:15px;
    position:absolute;
    right:0;
    top:5px;


input 
    width:100%;

小提琴

http://jsfiddle.net/aTvvN/1/

【参考方案3】：

请尝试以下操作：

HTML：

<input type="text" />
<img src='http://jsfiddle.net/img/initializing.png' />

CSS：

input 
    border:1px solid #ddd;
    border-right:none;
    float: left;

input:focus 
    outline:none;

img 
    float: left;
    height: 18px;
    width: 19px;
    border: 1px solid #ddd;
    border-left: none;
    margin: 2px 0px 0px -2px;

fiddle