如何向文本类型输入框添加象形文字?例如,我想在用户名输入中有'icon-user',就像这样:
当前回答
这里有另一种方法,通过在CSS中的伪元素之前使用:来放置象形文字。
工作演示在jsFiddle
对于这个HTML:
<form class="form form-horizontal col-xs-12">
<div class="form-group">
<div class="col-xs-7">
<span class="usericon">
<input class="form-control" id="name" placeholder="Username" />
</span>
</div>
</div>
</form>
使用这个CSS (Bootstrap 3。兼容基于webkit的浏览器)
.usericon input {
padding-left:25px;
}
.usericon:before {
height: 100%;
width: 25px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
position: absolute;
content: "\e008";
font-family: 'Glyphicons Halflings';
pointer-events: none;
}
正如@Frizi所说,我们必须添加指针事件:none;这样光标就不会干扰到输入焦点。所有其他CSS规则都用于居中和添加适当的间距。
结果:
其他回答
这个“欺骗”的副作用是,glyphicon类会改变输入控件的字体。
小提琴
<input class="form-control glyphicon" type="search" placeholder=""/>
如果你想摆脱副作用,你可以删除“glyphicon”类,并添加以下CSS(可能有更好的方法来设置占位符伪元素,我只在Chrome上测试过)。
小提琴
.form-control[type="search"]::-webkit-input-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
可能有一个更干净的解决方案:
小提琴
CSS
.form-control.glyphicon {
font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
HTML
<input class="form-control glyphicon" type="search" placeholder=" search" />
<input class="form-control glyphicon" type="text" placeholder=" username" />
<input class="form-control glyphicon" type="password" placeholder=" password" />
您应该能够使用现有的引导类和一些自定义样式来实现这一点。
<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
以下是它在纯Bootstrap 5中的工作原理:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>iconbutton</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"> </head> <body> <div class="d-flex flex-row align-items-center m-4 border rounded"> <i class="fa-solid fa-search mx-2"></i> <input type="text" class="form-control border-0" placeholder="Search"> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
若要删除出现在焦点上的边框,请向输入添加shadow-0。
对于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>
对于输入,我有这样的东西:
没有引导:
我们将在一秒钟内得到Bootstrap,但为了自己做这件事,这里有基本的CSS概念在发挥作用。正如beard of prey指出的那样,你可以通过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; }
柱塞演示
注意:这假设您使用的是象形文字,但同样适用于font-awesome。 对于FA,只需将.glyphicon替换为.fa
引导:
正如buffer指出的那样,这可以通过使用带有可选图标的验证状态在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>
优点:
包括对不同表单类型的支持(基本,水平,内联) 包括对不同控件大小的支持(默认,小,大)
缺点:
不包括左对齐图标的支持
为了克服这些缺点,我将这个拉请求与支持左对齐图标的更改组合在一起。由于这是一个相对较大的变化,它已经被推迟到未来的版本,但如果你现在就需要这些功能,这里有一个简单的实现指南:
只需要在css中包含这些表单更改(也通过底部的隐藏堆栈片段内联)*LESS:或者,如果你是通过LESS构建的,这里是LESS中的表单更改
然后,你所要做的就是在任何具有.has-feedback类的组中包含.has-feedback-left类,以便左对齐图标。
由于在不同的表单类型、不同的控件大小、不同的图标集和不同的标签可见性上有许多可能的html配置,所以我创建了一个测试页面,为每个排列显示正确的html集以及现场演示。
这是在Plunker的一个演示
P.S. frizi建议添加指针事件:没有;已添加到引导
没找到你要找的东西吗?试试这些类似的问题:
添加推特引导图标输入框 把搜索图标附近的文本框引导
添加CSS左对齐反馈图标
.has-feedback .form-control { padding-right: 34px; } .has-feedback .form-control.input-sm, .has-feedback.form-group-sm .form-control { padding-right: 30px; } .has-feedback .form-control.input-lg, .has-feedback.form-group-lg .form-control { padding-right: 46px; } .has-feedback-left .form-control { padding-right: 12px; padding-left: 34px; } .has-feedback-left .form-control.input-sm, .has-feedback-left.form-group-sm .form-control { padding-left: 30px; } .has-feedback-left .form-control.input-lg, .has-feedback-left.form-group-lg .form-control { padding-left: 46px; } .has-feedback-left .form-control-feedback { left: 0; } .form-control-feedback { line-height: 34px !important; } .input-sm + .form-control-feedback, .form-horizontal .form-group-sm .form-control-feedback { width: 30px; height: 30px; line-height: 30px !important; } .input-lg + .form-control-feedback, .form-horizontal .form-group-lg .form-control-feedback { width: 46px; height: 46px; line-height: 46px !important; } .has-feedback label.sr-only ~ .form-control-feedback, .has-feedback label.sr-only ~ div .form-control-feedback { top: 0; } @media (min-width: 768px) { .form-inline .inline-feedback { position: relative; display: inline-block; } .form-inline .has-feedback .form-control-feedback { top: 0; } } .form-horizontal .has-feedback-left .form-control-feedback { left: 15px; }
推荐文章
- 如何使一个DIV不包装?
- 使用jQuery以像素为整数填充或边距值
- CSS div元素-如何显示水平滚动条只?
- 如何指定一个元素后包装在css flexbox?
- 使用“!”的含义是什么?重要的”?
- 用CSS截断长字符串:可行吗?
- 重要的样式
- 灰色的图像与CSS?
- CSS中*和*|*的区别是什么?
- 资源解释为样式表,但以MIME类型text/html传输(似乎与web服务器无关)
- CSS高度:100% vs高度:auto
- 带引导的固定宽度按钮
- 是类型="文本/css"必须在<链接>标签?
- 在没有jQuery的情况下,防止悬停父div的子元素时onmouseout
- 英语字母表中哪个字母占像素最多?