2018-04-04 表单美化

1、模仿百度输入框

image.png
image.png

让xy浮起来，这里看到输入框input和xy直接还有空隙（原因是两者之间有回车）
这个空隙在不同浏览器、不同字体下等是不一样的
为了解决，我们在外面再加个span

image.png
不想内联里的内联之间有缝隙，就让其内容display用inline-block显示 问题： image.png

相互之间有缝隙

方法一，让这2个都进行左浮

image.png

没有缝隙了，但是其父级wrapper为什么没有塌陷呢？（按照理论应该要加clearfix），因为wrapper的父级body里有display:flex（自带BFC功能）

接下里细节美化
输入框的宽高，边框颜色等

问题：点击输入框的时候，边框会变蓝 image.png

.inputWrapper input[type="text"]:focus{
outline:none;
border-color:#4b94fc;
}

解决光标内边距

image.png

加padding-left

接下来做2个icon

image.png
image.png

太大了，改样式

image.png
image.png
image.png
image.png
两边高对齐，除了设置 image.png
还可以在他们2个的爸爸上面直接加display:flex image.png
自动补全
http://jsbin.com/soxamofuja/edit?html,js,output

2、做图片上传
以前的图片上传

image.png
image.png
image.png

可以去除image下面的空隙

image.png
获取图片数据，然后通过ajax向后台发请求，省了步骤（图片选中了，还要点提交）
http://jsbin.com/xorezebudu/edit?html,js,output
注意CSS的层及JS

3、美化按钮

image.png

行高可以不写，因为按钮标签会自动居中它的文字
但是如果是a标签（要加display:inline-block，因为inline元素是不接受宽高的）,文字就会上去

不居中 image.png

接下来做涟漪效果

image.png

visibility作用：默认不显示，用户点击了才显示样式（放大10倍）
pointer-events作用：这个circle是有一定大小的，这里是让用户最好不要点到circle，点击事件监控的是button

image.png

问题：这里我们希望点击出现涟漪的时候，文字不会遮挡，即文字在涟漪颜色的上面
解决：让父级button的z-index不为auto，让涟漪的z-index为-1即可，这里是堆叠上下文的问题

需求：涟漪结束之后就应该消失

image.png
http://jsbin.com/tucipipudo/edit?html,css,js,output