[研究][HTML5][CSS3]浮動標籤 (Floating labels)
[研究][HTML5][CSS3]placeholder-shown偽類實現輸入框浮動文字效果
2022-04-24
HTML5 + CSS3
<head>
<style>
.LoginForm {
padding: 10px;
width: 500px;
border: 4px solid #1199CD;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
margin-bottom: 30px;
border-radius: 12px;
overflow: auto;
}
.input-group {
position: relative;
margin: 20px;
font-size: 16px;
}
.input-group>input {
display: block;
box-sizing: border-box;
width: 100%;
padding: 1em;
font-size: 16px;
line-height: 1.0;
border: none;
border-bottom: 1px solid #cdcdcd;
border-radius: 0.4em;
transition: box-shadow 0.3s;
}
.input-group input::placeholder {
font-style: italic;
color: #cdcdcd;
}
.input-group>input:focus {
outline: none;
box-shadow: 0.2em 0.8em 1.6em #cdcdcd;
}
.input-group>label {
position: absolute;
bottom: 0;
left: 1em;
z-index: -1;
visibility: hidden;
color: #555555;
opacity: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translate3d(0, 0, 0) scale(0);
transform: translate3d(0, 0, 0) scale(0);
-webkit-transition:
opacity 0.3s,
visibility 0.3s,
transform 0.3s,
z-index 0.3s;
transition:
opacity 0.3s,
visibility 0.3s,
transform 0.3s,
z-index 0.3s;
}
.input-group>input:focus ~ label {
z-index: 1;
visibility: visible;
opacity: 1;
-webkit-transform: translate3d(0, -2.4em, 0) scale(1);
transform: translate3d(0, -2.4em, 0) scale(1);
}
</style>
</head>
<form id="form1" runat="server" class="LoginForm">
<h1 style="text-align:center">管理平台</h1><hr>
<div class="input-group">
<input type="text" id="username" placeholder="請輸入賬號">
<label for="username">賬號</label>
</div>
<!-- 密碼 -->
<div class="input-group">
<input type="text" id="password" placeholder="請輸入6~8位密碼">
<label for="password">密碼</label>
</div>
<div class="input-group">
<input type="text" id="password" placeholder="驗證碼">
<label style="z-index: 1;
visibility: visible;
opacity: 1;
-webkit-transform: translate3d(0, -2.4em, 0) scale(1);
transform: translate3d(0, -2.4em, 0) scale(1);" for="password">驗證碼</label>
</div>
<div class="input-group">
<input type="submit" value="登入">
</div>
</form> |
(完)
