我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
当前回答
.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}
将上述标签添加到您的CSS文件中,并使用指定的类。
其他回答
其他人发布的CSS解决方案是实现这一目标的最佳方法。
如果这会给你带来任何问题(请阅读IE6),你也可以在div中使用无界输入。
<div style="border: 1px solid #DDD;">
<img src="icon.png"/>
<input style="border: none;"/>
</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>
<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>
例如,你可以使用这个:标签隐藏输入(图标显示)。
我遇到过这样的情况。它没有工作,因为背景:#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;
}
值得一提的是,边框、填充和文本对齐属性对于解决方案并不重要。我只是复制了原始代码。
这对我来说很管用:
输入。有效的{ 边框颜色:# 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" /> > < /形式