html在文本框添加相机图标,[Bootstrap]Bootstrap中如何给文本框添加图标？

问题描述

如题&＃xff0c;在Bootstrap中&＃xff0c;如何为一个文本框添加图标呢&＃xff1f;比如有实现一个用户名的文本框&＃xff0c;如下图&＃xff1a;

方案一

参考官方的示例代码(无需写其他的CSS样式)&＃xff1a;

方案二

不使用 Bootstrap实现&＃xff0c;

HTML:

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; }注&＃xff1a;请引用 font-awesome 图标库&＃xff0c; 点击查看完整示例

使用 Bootstrap:

方案三

HTML&＃xff1a;

CSS:

.form-control {

padding-right: 30px;

}

.form-control &＃43; .glyphicon {

position: absolute;

right: 0;

padding: 8px 27px;

}

方案四

方案六

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//&＃43;BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII&＃43;22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4&＃43;C&＃43;/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII&＃61;);

}

HTML:

运行效果&＃xff1a;