input输入框添加内部图标
有可能在制作网页的过程中遇到各种美化表单设计,这次我们来试着做一个demo
将input输入框添加内部图标
话不多说,看一下最终效果
我们的思路是,在一个div中,加入一个div和一个input标签,小div在左侧,input放右侧,用box-sizing:border-box,这句代码代表的是这个:怪异盒子模型 => 盒子定长定宽,不管有没有padding,border,margin,始终就是这么大,影响的只会是里面的元素。
左侧的div给border,也要给border-radius,右边的input只给右边的border,不给border-radius,input里面padding-left最好设置一下,更加美观。
总体思路其实是把大的div做成让人感觉像是一个input,如果能做到,那么你就成功了。下面附代码
<div class="student-name-box">
<div>
<img src="./img/学号.png" />
</div>
<input type="text" value="" placeholder="请输入学号" />
</div>
<div class="student-id-box">
<div>
<img src="./img/密码.png" />
</div>
<input type="password" placeholder="请输入密码" />
</div>
.student-name-box,.student-id-box{
box-sizing: border-box;
width:300px;
height:36px;
border: 2px solid #DDD;
border-radius: 5px;
margin-top: 27px;
margin-left: 50%;
transform: translateX(-50%);
}
input{
box-sizing: border-box;
margin-bottom: 1px;
outline: none;
width:264px;
height:32px;
padding-left: 10px;
border:;
}
.student-name-box div:first-child
,.student-id-box div:first-child{
box-sizing: border-box;
float: left;
width: 32px;
height: 32px;
background: rgb(233,236,239);
background-position:8px 10px;
border-right: 2px solid #DDD;
}
.student-name-box img,.student-id-box img{
width: 16px;
height: 16px;
margin:8px;
}
大家又想看的表单美化或是界面美化也可以在下方留言给我哦
加油啊柯基
input输入框添加内部图标的更多相关文章
- 为input输入框添加圆角并去除阴影
<input type="text" name="bianhao" value="" placeholder="请输入商品编 ...
- 在input内添加小图标或文字(元/月)等
文字: <td class="formValue"> <div class="input-group"> <input id=&q ...
- input中加入搜索图标
刚吃了一份宫保鸡丁刀削面,幸福感满满,写篇博客消耗一下热量. 今天工作遇到的一个问题是在input输入框中加入图标,当输入内容后,图标和提示语一起隐藏,类似于placeholder的功能.如淘宝页面, ...
- 如何在移动web模仿客户端给input输入框添加自定义清除按钮
项目有个需求就是在input输入框添加清除按钮,网上查找资料加上自己琢磨终于弄出来了. 灵感来自于 http://www.zhangxinxu.com/wordpress/?p=4077 由于项目已经 ...
- jQuery动态添加、删除按钮及input输入框
输入框的加减实现: <html> <head> <meta charset="utf-8"> <title>动态创建按钮</t ...
- IE input X 去掉文本框的叉叉和password输入框的眼睛图标
IE input X 去掉文本框的叉叉和password输入框的眼睛图标 从IE 10開始,type="text" 的 input 在用户输入内容后.会自己主动产生一个小叉叉(X) ...
- 实现bootstrap布局的input输入框中的图标点击功能
使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标.如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的 ...
- 移动端input“输入框”常见问题及解决方法
转自 https://www.cnblogs.com/ljx20180807/p/9837748.html 1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在 ...
- 使用js实现input输入框的增加
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 2019.01.23 hdu1964 Pipes(轮廓线dp)
传送门 题意简述:给一个没有障碍的网格图,任意两个格子连通需要花费一定代价,现在求一条覆盖所有格子的哈密顿回路的总权值的最小值. 思路: 跟这道题一毛一样,除了把求和变成求最小值以外. 代码: #in ...
- 2019.01.19 codeforces893F.Subtree Minimum Query(线段树合并)
传送门 线段树合并菜题. 题意简述:给一棵带点权的有根树,多次询问某个点ppp子树内距离ppp不超过kkk的点的点权最小值,强制在线. 思路: 当然可以用dfsdfsdfs序+主席树水过去. 然而线段 ...
- python模块:pickle
"""Create portable serialized representations of Python objects. See module copyreg f ...
- 时间控件My97简单用法
my97的用法很是简单,项目中用到,查了资料才找到的,简单使用,记一下,方便查阅. 1.添加依赖. <script language="javascript" type=&q ...
- 重启随机游走算法(RWR:Random Walk with Restart)
1 pagerank算法的基本原理 Pagerank算法是Google的网页排名算法,由拉里佩奇发明.其基本思想是民主表决.在互联网上,如果一个网页被很多其他网页所链接,说明它受到普遍的承认和信赖,那 ...
- SpringMVC处理模型数据
目录结构 web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi= ...
- 基于udp协议的套接字,socketserver模块,多道技术,进程理论
进程指的是一个正在进行/运行的程序,进程是用来描述程序执行过程的虚拟概念 进程vs程序 程序:一堆的代码 进程:程序执行的过程 进程的概念起源于操作系统,进程是操作系统最核心的概念,操作系统的其他所有 ...
- C#-VS SQLServer数据库编程-摘
ado.net 通用类对象.在本地内存暂存数据 托管类对象.让本地通用类对象连接数据库,让本地通用类对象和数据库同步 连接数据库 new connection(connectstring) comma ...
- MySQL中数据的基本查询方式
1.查询所有列 select * from 表名称; 2.查询指定列 select 字段名,字段名,字段名 from 表名称; 3.查询时添加常量列(临时备注) select 字段名,字段名,字段名, ...
- jQuery如何获取元素及选择器的参考
获取元素 Jquery当中几乎所有的功能.选择.事件处理等都用到了这个函数.通常用来获取元素,获取到的元素都会被存储为jQuery对象. 例如: 先设定一个id为aaa的div <body> ...