如何向文本类型输入框添加象形文字?例如,我想在用户名输入中有'icon-user',就像这样:
当前回答
对于Bootstrap 3.3.5,我也有一个决定:
<div class="col-sm-5">
<label for="date">
<input type="date" placeholder="Date" id="date" class="form-control">
</label>
<i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>
对于输入,我有这样的东西:
其他回答
您可以使用它的Unicode HTML
所以要添加用户图标,只需添加到占位符属性,或任何您想要的位置。
你可以看看这张小抄。
例子:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <input type="text" class="form-control" placeholder="" style="font-family: 'Glyphicons Halflings', Arial"> . <input type="text" class="form-control" value="value. " style="font-family: 'Glyphicons Halflings', Arial"> . <input type="submit" class="btn btn-primary" value="submit-button" style="font-family: 'Glyphicons Halflings', Arial">
方法,不要忘记将输入的字体设置为Glyphicon字体 下面的代码:font-family: 'Glyphicons Halflings', Arial,其中 Arial是输入中常规文本的字体。
对于Bootstrap 3.3.5,我也有一个决定:
<div class="col-sm-5">
<label for="date">
<input type="date" placeholder="Date" id="date" class="form-control">
</label>
<i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>
对于输入,我有这样的东西:
下面是我如何使用默认的引导CSS v3.3.1:
<div class="form-group">
<label class="control-label">Start:</label>
<div class="input-group">
<input type="text" class="form-control" aria-describedby="start-date">
<span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
这是它的样子:
它可以使用官方引导3中的类来完成。X版本,没有任何自定义css。
在输入标记之前使用input-group-addon,在input-group内部然后使用任何字形,下面是代码
<form>
<div class="form-group">
<div class="col-xs-5">
<div class="input-group">
<span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
<input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
</div>
</div>
</div>
</form>
这是输出
为了进一步自定义它,在你自己的custom.css文件中添加几行自定义css(如果需要可以调整填充)
.transparent {
background-color: transparent !important;
box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
}
.left-border-none {
border-left:none !important;
box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
}
通过使input-group-addon的背景透明,并使输入标签的左梯度为零,输入将有一个无缝的外观。下面是定制的输出
下面是一个jsbin的例子
这将解决自定义css与标签重叠的问题,在使用input-lg时对齐,并关注标签问题。
您应该能够使用现有的引导类和一些自定义样式来实现这一点。
<form>
<div class="input-prepend">
<span class="add-on">
<i class="icon-user"></i>
</span>
<input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
</div>
编辑图标是通过图标用户类引用的。这个答案是在Bootstrap版本2的时候写的。你可以在下面的页面上看到参考:http://getbootstrap.com/2.3.2/base-css.html#images