带Icon的Input登录框布局
效果
思路
基本思路
细节问题
如何将icon放入input？
——position:relative\absolute
注意position:relative脱离文档流，但是其本身的位置是在文档中占据空间的
如：
运用position:relative调整位置后，达到效果，却有着视觉“空行”的效果
是因为文档流中，仍然为div-icon预留了它本身应有的位置，非手动添加的margin、padding等
如何在input聚焦前后，精准完成嵌套
因效果的需要，我们需要在input聚焦后，单独设置样式。
用outline:none;清除默认的input选中外边线，再设置我们自定义的border
- 错误一：起始input样式设为
border:none，input:focus再设置border:1px .....
好像对齐了…点击后…
因为点击后设置了border的属性，使得input的高度加上了border的宽度，发生了改变，所以div-icon定位，会发生偏移。
解决办法：在初始input样式时，就加入border，改变其颜色（为背景色），使其视觉上不被发现。
也许有人会说为什么不直接用input的outline属性，更方便，可outline就无法使input样式变为圆角。修改圆角是通过border-radius实现的。
修改后，效果
如何制作圆角
我们需要制作的圆角有：input的四个角+div-icon的左上角+div-icon的左下角
需要用到的属性:border-radius,border-top-left-radius,border-bottom-left-radius
理想情况是——圆角都统一设置为5px，一定能完美嵌套！
动手制作后？？？
行吧，数学知识用起来…（共用一个圆心，半径不一样！画得不咋地~）
border-radius设置的px就是指的半径。
我们现在把外层input的border-radius:5px
里层div-icon的border:radius:4px
看效果，完成！
如果遇到了对齐的问题
可以尝试用vertical-align设置
input聚焦后，修改div-icon样式
我是用js原生实现的
提取dom->监听dom->发生改变时，修改div-icon样式
(多想在原生css里写if判断…）
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-sc
最低0.47元/天 解锁文章
9207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
