如何在输入元素的末尾添加很棒的字体图标?
<input id="someId" type="text" class="some-class" data-bind="textInput: myVariable">
里面有文字时,是否还可以保留图标?
我正在使用淘汰表。谢谢大家!
答案 0 :(得分:1)
这是示例代码:
<div class="input-container">
<input class="input-field" type="text" placeholder="Username" name="usrnm">
<i class="fa fa-user icon"></i>
</div>
还有一个有效的jsfiddle链接:http://jsfiddle.net/newzy08/aq9Laaew/77753/
答案 1 :(得分:1)
您可以尝试使用Bootstrap或任何其他CSS库,例如语义UI,Materialize等。
在Bootstrap中,看起来可能像这样:
<form class="form-inline">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-at"></i> <!-- Use of font awesome icon -->
</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
</form>
要在输入字段的末尾添加图标:
<form class="form-inline">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-at"></i>
</div>
</div>
</div>
</form>
在Codepen上查看示例