html中input标签放入小图标
直接上代码
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
position: relative;
}
.box .icon-search{
width: 20px;
height: 20px;
position: absolute;
top: 6px;
right: 0;
}
.box .username{
padding-left: 30px;
height: 25px;
}
</style>
</head>
<body>
<div class="box">
<input type="text" class="username" />
<i class="icon-search">图</i>
</div>
</body>
html中input标签放入小图标的更多相关文章
- html中为何经常使用<i>标签来作为小图标呢？
很多网站都是习惯使用<i></i>来代表小图标?而实际上用 <i> 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写),那么用<i>表示小i ...
- 关于django中input标签中file类型以及开路由
0825自我总结 关于django中input标签中file类型 1.input提交图片实时展示 <img src="/static/img/default.png" wid ...
- HTML中input标签maxlength属性的妙处
HTML中的input标签可是很常用的. HTML本身也非常简单,就是若干标签,每个标签有若干属性. 我在学习HTML的过程中,也没有太过重视. 今年,在写前端表单验证的时候,发现maxlength这 ...
- IE中input标签密码框与文本框宽度不一样问题
前言 在项目登录界面中有账户和密码的输入框,在Chrome中显示是正常的(本人使用的是Chrome浏览器,平时不用IE).等部署到客户的服务器上,访问时发现一个问题,在IE浏览器中文本框与密码框的宽度 ...
- 如何隐藏 Safari 中 input 标签的 autofill 图标
Safari 浏览器会为 <input type="passport"> 标签自动添加一个小锁的图标(如下图),本意上是让用户可以从这里选择相应的 用户名/密码 进行自 ...
- 微信小程序中input标签高度设置
如果没有设置高度所以显示的是控件自身的高度. 微信小程序input控件原始设置: 上图发现: 我只覆盖了官方input的height,而没有覆盖min-height; .query input{ bo ...
- HTML中input标签的alt属性和title属性的比较
经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...
- Jsoup API解析HTML中input标签
Jsoup官网地址:http://jsoup.org/ 1. 解析单个input元素 String html = "<p><input align=\"t ...
- html中input标签的tabindex属性
当浏览者浏览网站时可以通过按TAB键在网页的链接中依次移动,这是一个相当方便实用的功能.但如果网页中链接太多,恐怕按TAB键就没什么作用了,这时不妨通过改变TAB键移动的顺序来突出重点,在某些重要页面 ...
- Html中input标签的使用
1.取消按钮按下时的虚线框 在input里添加属性值 hideFocus 或者 HideFocus=true 2.只读文本框内容 在input里添加属性值 readonly 3.防止退后清空的TEXT ...
随机推荐
- 全志TinyVision芯片文章汇总
全志TinyVision芯片 TinyVision开发交流QQ群:821628986 文章目录汇总 教程共计14章,下面是章节汇总: 第0章_TinyVision套件简述 第1章_源码工具文档手册 第 ...
- angular 知识
看完以下内容应该就可以上手Angular了 https://angular.io/start Udemy - Complete Angular 14 Course - Learn Frontend D ...
- vue3 modifier
vue3 modifier 是什么? modifier 中文意思为修饰符. 在vue3中主要是体现在v-model上,vue3允许我们添加自定义修饰符. 比如说这样: <template> ...
- Python网页应用开发神器Dash 2.18.1稳定版本来啦
本文示例代码已上传至我的Github仓库:https://github.com/CNFeffery/dash-master Gitee同步仓库地址:https://gitee.com/cnfeffer ...
- Asp.net Core 学习笔记 Azure Storage
更新: 2021-07-22 使用 Azure storage 以后, 还要解决一个 url 的问题. 文件自然是通过我们的 domain 来访问才合理丫. 这个是 azure 的 url : htt ...
- nexus 部署与设置
安装nexus df -h 先查看目录磁盘空间,我安装的版本占用了四个G 空间,目录文件空间不够导致启动失败 上传 nexus 压缩包,并解压 查询 8081 端口号是否被占用 sudo netsta ...
- 【赵渝强老师】使用MongoDB的命令行工具：mongoshell
一.启动mongo shell 安装好MongoDB后,直接在命令行终端执行下面的命令: mongo 如下图所示: 可选参数如下: 也可以简写为: 在mongo shell中使用外部编辑器,如:vi, ...
- 直播预告 | 字节跳动云原生大数据分析引擎 ByConity 与 ClickHouse 有何差异？
ByContiy 是字节跳动开源的一款云原生的大数据分析引擎,擅长交互式查询和即席查询,具有支持多表关联复杂查询.集群扩容无感.离线批数据和实时数据流统一汇总等特点. ByConity 从1月份发布开 ...
- ios中文件夹文件的创建和删除
//1.文件夹.文件的创建和删除 NSFileManager *fileManager=[NSFileManager defaultManager]; NSString *filePath=@&quo ...
- docker安装过程 - 下载mysql
1. 下载必要的包 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 2. 指定虚拟机去哪里安装 docker sudo ...