mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
69 lines
1.7 KiB
HTML
69 lines
1.7 KiB
HTML
<div class="inputContainer">
|
|
<input required="required" id="inputField" placeholder="Username" type="text">
|
|
<label class="usernameLabel" for="inputField">Username</label>
|
|
<svg viewBox="0 0 448 512" class="userIcon"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"></path></svg>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by vinodjangid07 - Tags: input */
|
|
.inputContainer {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
#inputField {
|
|
border: 2px solid white;
|
|
background-color: transparent;
|
|
border-radius: 10px;
|
|
padding: 12px 15px;
|
|
color: black;
|
|
font-weight: 500;
|
|
outline: none;
|
|
caret-color: rgb(155, 78, 255);
|
|
transition-duration: .3s;
|
|
font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
.userIcon {
|
|
position: absolute;
|
|
fill: rgb(155, 78, 255);
|
|
width: 12px;
|
|
top: -23px;
|
|
left: -15px;
|
|
opacity: 0;
|
|
transition: .2s linear;
|
|
}
|
|
|
|
.usernameLabel {
|
|
position: absolute;
|
|
top: -25px;
|
|
left: 5px;
|
|
color: white;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
|
overflow: hidden;
|
|
transition: .2s linear;
|
|
opacity: 0;
|
|
}
|
|
|
|
#inputField:focus ~ .usernameLabel,
|
|
#inputField:valid ~ .usernameLabel {
|
|
transform: translateX(20px);
|
|
opacity: 1;
|
|
}
|
|
|
|
#inputField:focus ~ .userIcon,
|
|
#inputField:valid ~ .userIcon {
|
|
transform: translateX(20px);
|
|
opacity: 1;
|
|
}
|
|
|
|
#inputField:focus,
|
|
#inputField:valid {
|
|
background-color: #ddd;
|
|
transition-duration: .3s;
|
|
}
|
|
|
|
</style>
|