我有一个关于表格中日志(log)输入的大纲效果的问题:
我试着做一个iCloud克隆，我喜欢当输入是活动和焦点时的蓝色轮廓效果.
在操作输入时，我也不想因为边界而产生任何效果，所以我设置了border: none;.
我遇到的问题是，当我用简单的css做效果时，第二个输入(密码)悬停在第一个输入(邮箱)的轮廓上.我试着用边距和填充来解决这个问题，但没有成功……
.email-input,
.pass-input {
width: 20rem;
height: 24px;
border-radius: 0.3rem;
font-size: 17px;
font-weight: 200;
margin: auto;
padding: 0.5rem;
outline: 1px solid rgb(155, 154, 154);
border: none;
position: relative;
display: flex;
justify-content: center;
}
.email-input:active,
.email-input:focus {
border: none;
outline: 2px solid #0070c9;
}
.pass-input:active,
.pass-input:focus {
border: none;
outline: 2px solid #0070c9;
}
.email-input {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.pass-input {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}<div class="page-1">
<div class="login-logo">
<img src="../Assets/login-logo.svg">
</div>
<div class="login-title">
<p class="login-text">
Se connecter avec un identifiant
</p>
</div>
<form action="#" class="main-form">
<div class="login-form">
<span>
<input id="username" class="email-input" type="email" placeholder="Identifiant" required="">
</span>
<span>
<input id="password" class="pass-input" type="password" placeholder="Mot de passe" required="">
<button id="submit" class="fal fa-arrow-circle-right"></button>
</span>
</div>
</form>
</div>And some screenshots :个
第二次输入为The wished result
已try :
- 两个输入都有上下限，但我不喜欢这样的结果.我想要两者之间的无缝连接.
- BORDER-TOP:无；//用于PASS-INPUT
我认为理想的解决方案是有一个解决方案，就像一个轮廓-顶部:没有；第二个输入.但我不知道，也没有找到它.