[研究][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> |
(完)
沒有留言:
張貼留言