带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-scale=1.0">
<meta http-equiv="X-UA-Compatible" content