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

现场版本:潮汐力主题


当前回答

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

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

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

其他回答

你可以试试这个:Bootstrap-4 Beta https://www.codeply.com/go/W25zyByhec

<div class="container">
            <form>
                <div class="row">
                    <div class="input-group mb-3 col-sm-6">
                      <input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                        <div class="input-group-prepend bg-white">
                            <span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>





我觉得这是最好最干净的解决办法。在input元素上使用text-indent:

{#图标 背景图片:url(. . /图片/图标/ dollar.png); 平铺方式:不再重演; 背景位置:2px 3px; } <input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />

我能够通过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

 <label for="fileEdit">
    <i class="fa fa-cloud-upload">
    </i>
    <input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>
  </label>

例如,你可以使用这个:标签隐藏输入(图标显示)。

你可以试试这个:

input[type='text'] {
    background-image: url(images/comment-author.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}