问题

如何将字形加入文字类型输入框?例如,我想在用户名输入中有"icon-user",如下所示:

在这里输入图片说明



解决方法

Without Bootstrap:

我们将在第二章介绍Bootstrap,但这里是基本的CSS概念,以便自己做.由于胡子胡须指出,您可以通过在输入元素内部绝对定位图标来使用CSS.然后在两边添加填充,以使文字不与图标重叠.

所以对于以下HTML:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

您可以使用以下CSS左右对齐字形:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Demo in Plunker

css screenshot

Note: This presumes you're using glyphicons, but works equally well with font-awesome.
For FA, just replace .glyphicon with .fa


With Bootstrap:

缓冲区指出,可以在Bootstrap中通过使用具有可选图标的验证状态 .这是通过给 .form-group 元素 .has-feedback 的类和 .form-control-feedback >.

最简单的例子是这样:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

优点:

  • Includes support for different form types (Basic, Horizontal, Inline)
  • Includes support for different control sizes (Default, Small, Large)

缺点:

  • Doesn't include support for left aligning icons

为了克服这个缺点,我将这拉式请求与更改一起放在一起,以支持左对齐的图标.由于这是一个相对较大的更改,因此已经推迟到以后发布,但如果您需要今天这些功能,请参阅以下简单的实施指南:

如果您使用较少,只需在您的项目中包含这些更改即可.如果您不使用较少,请使用任何在线LESS编译器抓取文件并将其转换为CSS.

然后,您所要做的就是在任何具有 .has-feedback 类别的群组中加入 .has-feedback-left 图标.

由于在不同的表单类型,不同的控件大小,不同的图标集和不同的标签可见性有很多可能的html配置,我创建了一个测试页面,显示每个排列的正确的HTML集合以及现场演示.

Here's a demo in Plunker

反馈截图

P.S. frizi's suggestion of adding pointer-events: none; has been added to bootstrap

找不到您要查找的内容?尝试类似的问题:




相关问题推荐