带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="ie=edge">
<title>Document</title>
</head>
<style>
body {
background-color: #e1fdff
/* background-attachment: fixed; */
}
html * {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.login {
height: 340px;
width: 280px;
margin: 0 auto;
}
.label {
height: 40px;
width: 40px;
background-image: url(./aconut.png);
background-color: #b6ecf3;
position: relative;
top: -41px;
left: 1px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
button {
border: none;
width: 100%;
height: 40px;
background-color: #54c5d8;
color: white;
border-radius: 5px;
cursor: pointer;
}
button:focus {
border: none;
outline: none
}
.inline {
display: inline-block;
}
.inline>img {
margin: 10px;
}
input {
width: 80%;
border: none;
padding-left: 50px;
height: 40px;
border-radius: 5px;
border: 1px solid #e1fdff;
cursor: pointer;
}
input:focus {
outline: none;
border: 1px solid #54c5d8
}
h2{
color: #54c5d8;
text-align: center;
font-size: 18px;
padding-bottom: 20px;
}
</style>
<body>
<header>
<h1>xxxxxxxxxxxxxxxxx登陆</h1>
</header>
<main>
<section>
<div class="login">
<h2>登陆</h2>
<div>
<input placeholder="请输入账号" id="account">
<div class="inline label account"><img src="./account.png"></div>
</input>
</div>
<div>
<input placeholder="请输入密码" id="pwd">
<div class="inline label pwd"><img src="./pwd.png" /></div>
</input>
</div>
<button>登陆</button>
</div>
</section>
</main>
</body>
</html>
<script>
window.onload=function(){
document.querySelector("#account").addEventListener("focus",function(){
document.querySelector(".account").setAttribute("style","background-color:#54c5d8")
})
document.querySelector("#account").addEventListener("blur",function(){
document.querySelector(".account").setAttribute("style","background-color:#b6ecf3")
})
document.querySelector("#pwd").addEventListener("focus",function(){
document.querySelector(".pwd").setAttribute("style","background-color:#54c5d8")
})
document.querySelector("#pwd").addEventListener("blur",function(){
document.querySelector(".pwd").setAttribute("style","background-color:#b6ecf3")
})
}
</script>
效果图:
完工!