我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
当前回答
我用下面的代码实现了这一点。
首先,你弯曲容器,使输入和图标在同一行。对齐物品可以使它们处于同一水平线上。
然后,使输入占用宽度的100%。给出图标的绝对位置,使其与输入重叠。
然后为输入添加右填充,这样输入的文本就不会到达图标。最后使用css属性给图标留出一些距离输入框边缘的空间。
注意:Icon标签可以是一个真正的图标,如果你是在ReactJs中工作,也可以是一个占位符,用于你在项目中使用图标的任何其他方式。
.inputContainer { 显示:flex; 对齐项目:中心; 位置:相对; } .input { 宽度:100%; padding-right: 40像素; } .inputIcon { 位置:绝对的; 右:10 px; } < div class = " inputContainer”> <input class="input" /> <图标类="inputIcon" /> < / div >
其他回答
我能够通过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
你可以试试这个: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[type='text'] {
background-image: url(images/comment-author.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
}
我遇到过这样的情况。它没有工作,因为背景:#ebebeb;我想把背景放在输入字段,该属性不断地显示在背景图像的顶部,我无法看到图像!我把background属性移到background-image属性上面,它起作用了。
input[type='text'] {
border: 0;
background-image: url('../img/search.png');
background-position: 9px 20px;
background-repeat: no-repeat;
text-align: center;
padding: 14px;
background: #ebebeb;
}
我的解决方案是:
input[type='text'] {
border: 0;
background: #ebebeb;
background-image: url('../img/search.png');
background-position: 9px 20px;
background-repeat: no-repeat;
text-align: center;
padding: 14px;
}
值得一提的是,边框、填充和文本对齐属性对于解决方案并不重要。我只是复制了原始代码。
<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>
例如,你可以使用这个:标签隐藏输入(图标显示)。