我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
当前回答
你可以试试这个: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>
其他回答
我用下面的代码实现了这一点。
首先,你弯曲容器,使输入和图标在同一行。对齐物品可以使它们处于同一水平线上。
然后,使输入占用宽度的100%。给出图标的绝对位置,使其与输入重叠。
然后为输入添加右填充,这样输入的文本就不会到达图标。最后使用css属性给图标留出一些距离输入框边缘的空间。
注意:Icon标签可以是一个真正的图标,如果你是在ReactJs中工作,也可以是一个占位符,用于你在项目中使用图标的任何其他方式。
.inputContainer { 显示:flex; 对齐项目:中心; 位置:相对; } .input { 宽度:100%; padding-right: 40像素; } .inputIcon { 位置:绝对的; 右:10 px; } < div class = " inputContainer”> <input class="input" /> <图标类="inputIcon" /> < / div >
我觉得这是最好最干净的解决办法。在input元素上使用text-indent:
{#图标 背景图片:url(. . /图片/图标/ dollar.png); 平铺方式:不再重演; 背景位置:2px 3px; } <input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />
<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>
例如,你可以使用这个:标签隐藏输入(图标显示)。
你可以用另一种方法点击它,让它做一个函数。看看下面的例子:
<div id="search-bar">
<input placeholder="Search or Type a URL">
<button><i class="fas fa-search"></i></button>
</div>
#search-bar {
display: flex;
justify-content: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 60px;
}
#search-bar > input {
width: 750px;
font-size: 30px;
padding: 20px;
border-radius: 50px 0px 0 50px;
border: none;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
background: #fff; /* CSS Edit Here */
}
#search-bar > button {
background: #fff;
border: none;
font-size: 30px;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-radius: 0 50px 50px 0 ;
padding-right: 20px;
}
这对我来说很管用:
输入。有效的{ 边框颜色:# 28 a745; padding-right: 30 px; 背景图片:url (https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png); 平铺方式:不再重演; Background-size: 20px; 背景位置:右中心; } < >形式 <标签= "名称" >名称> < /标签 <input class="valid" type="text" name="name" /> > < /形式