我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
当前回答
<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>
例如,你可以使用这个:标签隐藏输入(图标显示)。
其他回答
其他人发布的CSS解决方案是实现这一目标的最佳方法。
如果这会给你带来任何问题(请阅读IE6),你也可以在div中使用无界输入。
<div style="border: 1px solid #DDD;">
<img src="icon.png"/>
<input style="border: none;"/>
</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>
*内联风格是为了可读性考虑使用类
你可以试试这个:
input[type='text'] {
background-image: url(images/comment-author.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
}
.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}
将上述标签添加到您的CSS文件中,并使用指定的类。
<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>
例如,你可以使用这个:标签隐藏输入(图标显示)。