我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
当前回答
我用下面的代码实现了这一点。
首先，你弯曲容器，使输入和图标在同一行。对齐物品可以使它们处于同一水平线上。
然后，使输入占用宽度的100%。给出图标的绝对位置，使其与输入重叠。
然后为输入添加右填充，这样输入的文本就不会到达图标。最后使用css属性给图标留出一些距离输入框边缘的空间。
注意:Icon标签可以是一个真正的图标，如果你是在ReactJs中工作，也可以是一个占位符，用于你在项目中使用图标的任何其他方式。
.inputContainer { 显示:flex; 对齐项目:中心; 位置:相对; ｝ .input { 宽度:100%; padding-right: 40像素; ｝ .inputIcon { 位置:绝对的; 右:10 px; ｝ < div class = " inputContainer”> <input class="input" /> <图标类="inputIcon" /> < / div >
其他回答
您链接的站点使用了CSS技巧的组合来实现这一点。首先，它为<input>元素使用背景图像。然后，为了将光标移过去，它使用左填充。
换句话说，它们有这两条CSS规则:
background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;
只需使用CSS中的background属性即可。
<input id="foo" type="text" />
#foo
{
background: url(/img/foo.png);
}
.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}
将上述标签添加到您的CSS文件中，并使用指定的类。
没有背景图片的解决方案:
.icon { padding-left: 25 px; 背景:url(“https://static.thenounproject.com/png/101791-200.png”)无重复左; background-size: 20 px; ｝ <input type="text" class="icon" value placeholder="Search">
或者从右到左的图标
.icon-rtl { padding-right: 25 px; 背景:url(“https://static.thenounproject.com/png/101791-200.png”)无重复权限; background-size: 20 px; ｝ <input type="text" class="icon-rtl" value placeholder="Search">
我用下面的代码实现了这一点。
首先，你弯曲容器，使输入和图标在同一行。对齐物品可以使它们处于同一水平线上。
然后，使输入占用宽度的100%。给出图标的绝对位置，使其与输入重叠。
然后为输入添加右填充，这样输入的文本就不会到达图标。最后使用css属性给图标留出一些距离输入框边缘的空间。
注意:Icon标签可以是一个真正的图标，如果你是在ReactJs中工作，也可以是一个占位符，用于你在项目中使用图标的任何其他方式。
.inputContainer { 显示:flex; 对齐项目:中心; 位置:相对; ｝ .input { 宽度:100%; padding-right: 40像素; ｝ .inputIcon { 位置:绝对的; 右:10 px; ｝ < div class = " inputContainer”> <input class="input" /> <图标类="inputIcon" /> < / div >
