我想創建一個很酷的影片，當用戶點擊電子郵件輸入或密碼時，輸入的標簽會上升并在底部邊框有一個很好的過渡。
這就是我所擁有的：
這就是我想要創建的：
我的代碼：
.form {
position: relative;
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
.input {
background: none;
color: #c6c6c6;
font-size: 1.8rem;
padding: 1.6rem;
display: block;
border: none;
border-bottom: 1px solid #c6c6c6;
width: 100%;
}
.label {
position: absolute;
color: #c6c6c6;
font-size: 1.6rem;
left: 0.5rem;
top: 1rem;
}<div class="form">
<input class="email input" type="email" name="email" />
<label class="label" for="email">Email Address</label>
</div>
<div class="form">
<input class="password input" type="password" name="password" />
<label class="label" for="password">Password</label>
</div>我搜索了很多，但我發現的每個代碼示例都是關于 SCCS、SASS 的，但我不明白。所以請用純 CSS 幫助我。任何幫助將不勝感激！
uj5u.com熱心網友回復：
我使用 HTML 和 CSS 創建了一個影片演示。
.main {
width: 500px;
margin: 50px 100px;
;
}
.form-group {
position: relative;
margin-bottom: 45px;
}
input {
display: block;
width: 300px;
font-size: 14pt;
padding: 10px;
border: none;
border-bottom: 1px solid #ccc;
}
input:focus {
outline: none;
}
label {
position: absolute;
top: 10px;
left: 5px;
color: #999;
font-size: 14pt;
font-weight: normal;
pointer-events: none;
transition: all 0.2s ease;
}
input:focus ~ label,
input:valid ~ label {
top: -20px;
font-size: 10pt;
color: #5264AE;
}
.bar {
display: block;
position: relative;
width: 320px;
}
.bar:before,
.bar:after {
content: "";
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #5264AE;
transition: all 0.2s ease;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus ~ .bar:before,
input:focus ~ .bar:after {
width: 50%;
}<div class="main">
<div class="form-group">
<input type="text" name="email" required />
<span class="highlight"></span>
<span class="bar"></span>
<label for="email">Email</label>
</div>
<div class="form-group">
<input type="password" name="password" required />
<span class="highlight"></span>
<span class="bar"></span>
<label for="password">Password</label>
</div>
</div>uj5u.com熱心網友回復：
我附上了您修改后的代碼以按預期作業，您可以更改任何值以根據需要進行自定義，但這里是對其作業原理的解釋：
輸入元素
我添加了一個z-index以便用戶可以單擊標簽所在的位置并單擊輸入而不是標簽本身，還添加了一個過渡以使影片流暢。
input:focus指的是輸入處于活動狀態時（用戶單擊或通過按 Tab 鍵選擇）。
這就是魔法發生的地方以及復雜選擇器的解釋：
.input:focus~.label,
.input:not([value=""]):not(:focus):invalid~.label,
.input.has-content~.label {
font-size: .7rem;
top: -.4rem;
color: blue;
}
.input:focus ~ .label.label在輸入焦點時選擇所有輸入的元素同級元素，這樣當用戶焦點在輸入中時，標簽將在上方。
.input:not([value=""]):not(:focus):invalid~ .label 這個選擇器會在用戶取消輸入焦點但它有內容時捕捉到，所以標簽不會下降并與用戶名。（由于密碼型別輸入沒有 value 屬性，我附上一個 Js 片段，它對密碼元素執行相同的技巧，只需將類添加has-content到元素）
希望對你有幫助！
document.querySelector('.password').oninput = (e) => {
e.target.value.length > 0 ?
e.target.classList.add('has-content') :
e.target.classList.remove('has-content')
}.form {
position: relative;
display: flex;
flex-direction: column;
margin: 1rem;
}
.input {
height: 20px;
background: none;
color: #c6c6c6;
font-size: 1rem;
padding: .5rem .7rem;
display: block;
border: none;
border-bottom: 2px solid #c6c6c6;
width: 100%;
z-index: 2;
transition: all .3s ease;
}
.input:focus {
outline: transparent;
border-color: blue;
}
.input:focus~.label,
.input:not([value=""]):not(:focus):invalid~.label,
.input.has-content~.label {
font-size: .7rem;
top: -.4rem;
color: blue;
}
.label {
position: absolute;
color: #c6c6c6;
font-size: 1rem;
left: 0.5rem;
top: .6rem;
transition: all .3s ease;
}<div class="form">
<input class="email input" type="email" name="email" />
<label class="label" for="email">Email Address</label>
</div>
<div class="form">
<input class="password input" type="password" name="password" />
<label class="label" for="password">Password</label>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/535698.html
上一篇：如何在php中添加登錄和注銷