如何向文本类型输入框添加象形文字?例如,我想在用户名输入中有'icon-user',就像这样:
当前回答
这个“欺骗”的副作用是,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" />
其他回答
如果你正在使用Fontawesome,你可以这样做:
<input type="text" style="font-family:Arial, FontAwesome" placeholder="" />
结果
unicode的完整列表可以在The complete Font Awesome 4.6.3图标参考中找到
下面是我如何使用默认的引导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>
这是它的样子:
您可以使用它的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是输入中常规文本的字体。
下面是一种非引导解决方案,通过使用base64 URI编码将象形文字的图像表示直接嵌入到CSS中,使标记变得简单。
input { border:solid 1px #ddd; } input.search { padding-left:20px; background-repeat: no-repeat; background-position-y: 1px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=); } <input class="search">
以下是它在纯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。
推荐文章
- 如何使一个DIV不包装?
- 使用jQuery以像素为整数填充或边距值
- CSS div元素-如何显示水平滚动条只?
- 如何指定一个元素后包装在css flexbox?
- 使用“!”的含义是什么?重要的”?
- 用CSS截断长字符串:可行吗?
- 重要的样式
- 灰色的图像与CSS?
- CSS中*和*|*的区别是什么?
- 资源解释为样式表,但以MIME类型text/html传输(似乎与web服务器无关)
- CSS高度:100% vs高度:auto
- 带引导的固定宽度按钮
- 是类型="文本/css"必须在<链接>标签?
- 在没有jQuery的情况下,防止悬停父div的子元素时onmouseout
- 英语字母表中哪个字母占像素最多?