我如何把一个图标内的形式的输入元素?

现场版本:潮汐力主题


当前回答

我不想改变我的输入文本的背景,也不会与我的SVG图标工作。

我所做的就是为图标添加负边距,这样它就会出现在输入框中

并在输入中添加相同的填充值,这样文本就不会出现在图标下面。

<div class="search-input-container">

  <input
    type="text"
    class="search-input"
    style="padding-right : 30px;"
  />

  <img 
    src="@/assets/search-icon.svg" 
    style="margin-left: -30px;"
   />

</div>

*内联风格是为了可读性考虑使用类

其他回答

我不想改变我的输入文本的背景,也不会与我的SVG图标工作。

我所做的就是为图标添加负边距,这样它就会出现在输入框中

并在输入中添加相同的填充值,这样文本就不会出现在图标下面。

<div class="search-input-container">

  <input
    type="text"
    class="search-input"
    style="padding-right : 30px;"
  />

  <img 
    src="@/assets/search-icon.svg" 
    style="margin-left: -30px;"
   />

</div>

*内联风格是为了可读性考虑使用类

只需使用CSS中的background属性即可。

<input id="foo" type="text" />

#foo
{
    background: url(/img/foo.png);
}

我能够通过CSS将图标作为背景图像添加到输入字段中。从那里,您可以使用background-size属性调整图像的大小,最后,使用background-position-x和background-position-y属性定位元素。我在下面分享了一个代码片段,并链接到Codepen中的一个工作示例:

body { margin: 0; padding: 0; font-family: sans-serif; } .input-container { padding: 50px; } input { box-sizing: border-box; width: 250px; padding-left: 36px; height: 48px; background-image: url('https://image.shutterstock.com/image-vector/apple-icon-vector-fruit-symbol-260nw-1466147615.jpg'); background-size: 20px; background-position-x: 10px; background-position-y: 50%; background-repeat: no-repeat; border-radius: 15px; } <!DOCTYPE> <html> <head> <title>Icon Inside Input Field</title> </head> <body> <div class="input-container"> <label for="email"><p>Email:</p></label> <input type="text" name="email" id="email" placeholder="iram.the.goat@mailer.com"> </div> </body> </html>

https://codepen.io/Iram_Tech/pen/GRQqrNg

在输入中定位图标的一个简单易行的方法是使用下面代码所示的CSS属性position。 注意:为了清晰起见,我简化了代码。

创建围绕输入和图标的容器。 将容器位置设置为相对位置 将图标设置为绝对位置。这将使图标相对于周围的容器进行定位。 使用顶部,左侧,底部,右侧来定位容器中的图标。 设置输入内的填充,使文本不与图标重叠。

#输入容器{ 位置:相对; } #输入容器> img { 位置:绝对的; 上图:12 px; 左:15 px; } #输入容器>输入{ padding-left: 40像素; } < div id = "输入容器" > < img / > <输入/ > < / div >

我用下面的代码实现了这一点。

首先,你弯曲容器,使输入和图标在同一行。对齐物品可以使它们处于同一水平线上。

然后,使输入占用宽度的100%。给出图标的绝对位置,使其与输入重叠。

然后为输入添加右填充,这样输入的文本就不会到达图标。最后使用css属性给图标留出一些距离输入框边缘的空间。

注意:Icon标签可以是一个真正的图标,如果你是在ReactJs中工作,也可以是一个占位符,用于你在项目中使用图标的任何其他方式。

.inputContainer { 显示:flex; 对齐项目:中心; 位置:相对; } .input { 宽度:100%; padding-right: 40像素; } .inputIcon { 位置:绝对的; 右:10 px; } < div class = " inputContainer”> <input class="input" /> <图标类="inputIcon" /> < / div >