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

问题描述

如题，在Bootstrap中，如何为一个文本框添加图标呢？比如有实现一个用户名的文本框，如下图：

方案一

参考官方的示例代码(无需写其他的CSS样式)：

方案二

不使用 Bootstrap实现，

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

使用 Bootstrap:

Username

方案三

HTML：

CSS:

.form-control {

padding-right: 30px;

}

.form-control + .glyphicon {

position: absolute;

right: 0;

padding: 8px 27px;

}

方案四

Start:

方案六

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=);

}

HTML:

运行效果：

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

matlab静态文本框显示,如何在Matlab GUI中利用静态文本框显示程序的结果
www.mh456.com防采集. 调用2113pushbutton的回调函数,再用set让结构在5261文本框中显示.给4102一个简单的例1653子:内pushbutton的回调函数(实现两容个数 ...
python怎么设置文本框大小_如何在Python中更改Tkinter文本框的宽度和高度？
所以我一直在用Tkinter在Python上开发一个计算器.不过,我想把按钮隔开,而不是把它们直接放在一起.我不使用root.Frame函数.这是我的代码:from Tkinter import * ...
java关于替换文本输出的讲解_java替换文件中某一行文本的内容
个人博客地址:http://www.wenhaofan.com/article/20180913160442 代码如下 package com.wenhaofan.common.kit; impor ...
【Groovy】集合遍历 ( 操作符重载 | 集合中的 “ ＜＜ “ 操作符重载 | 使用集合中的 “ ＜＜ “ 操作符添加一个元素 | 使用集合中的 “ ＜＜ “ 操作符添加一个集合 )
文章目录一.集合中的 " << " 操作符重载 1.使用集合中的 " << " 操作符添加一个元素 2.使用集合中的 " & ...
用python实现复选框树_如何使用Python中的复选框创建树视图
我一直在使用Tkinter和Tix来编写一个小程序. 我在需要一个树状视图的复选框(检查按钮),所以我可以从树视图中选择项目. 有没有办法做到这一点? 我一直在看ttk.Treeview(),它看起来 ...
python为text添加滚动条_在Tkinter中向一组小部件添加滚动条
概述您只能将滚动条与一些小部件关联起来,根小部件和Frame不是那组小部件的一部分. 最常见的解决方案是创建一个画布小部件,并将滚动条与该小部件关联起来.然后,将包含标签小部件的框架嵌入到画布中.确 ...
itextsharp 获取文本_使用itextsharp从签名图像中获取Layer2文本（签名描述）
虽然Bruno以包含"第2层"的PDF开头解决了这个问题,但请允许我先说明使用这些"签名层"在PDF签名外观是不 PDF规范,规范实际上根本不知道这些层!因此, ...
html保留数据库文本格式,以html格式显示数据库中的格式化文本（FLASK应用程序）...
我目前正在构建一个菜谱应用程序,用户可以创建自己的菜谱,这些菜谱存储在数据库中.用户可以在文本区域中输入配方成分和说明.你知道吗 placeholder="Type hier al de i ...
matlab添加旁白,在MATLAB中向已知信号添加高斯白噪声（转载）
引用: MATLAB中产生高斯白噪声非常方便,可以直接应用两个函数,一个是WGN,另一个是AWGN.WGN用于产生高斯白噪声,AWGN则用于在某一信号中加入高斯白噪声. 1. WGN:产生高斯白噪声 ...
java 压缩包添加文件,如何在Java中向现有zip文件添加条目？
Opening the file with a ZipOutputStream overwrites it. Is there a way to keep the file and just add ...

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

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

最新文章

热门文章