mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
46 lines
No EOL
933 B
HTML
46 lines
No EOL
933 B
HTML
<div class="input-container">
|
|
<input type="text" name="email" class="text-input" />
|
|
<label for="email">Email</label>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by Alanav29 - Tags: simple, email, minimalist, input, light, toggle, text animation, input effect */
|
|
.input-container {
|
|
width: auto;
|
|
position: static;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.input-container label {
|
|
color: black;
|
|
position: relative;
|
|
top: 2px;
|
|
border: solid white;
|
|
border-top: none;
|
|
border-right: none;
|
|
border-left: none;
|
|
width: fit-content;
|
|
transition: transform 0.2s;
|
|
margin: 0px 0px 0px 12px;
|
|
padding: 0px 4px 0px 4px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.input-container input:focus + label {
|
|
color: rgb(161, 66, 249);
|
|
transform: scale(1.2);
|
|
transform: translateX(0.5rem);
|
|
}
|
|
|
|
.input-container input {
|
|
border: 2px rgb(161, 66, 249) solid;
|
|
padding: 8px;
|
|
}
|
|
|
|
.input-container input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
</style>
|
|
|