mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
51 lines
994 B
HTML
51 lines
994 B
HTML
<div class="relative">
|
|
<input class="input-cal input-base" id="input" placeholder="" type="text">
|
|
<label id="label-input">Name</label>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by Amine-maker - Tags: active, input, account */
|
|
#label-input {
|
|
transition: all 0.1s ease-in-out;
|
|
color: #2c2c54;
|
|
position: absolute;
|
|
top: 30%;
|
|
left: 18px;
|
|
transform: scale(0.95);
|
|
opacity: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.input-base {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
#input:focus ~ label#label-input,
|
|
#input:not(:placeholder-shown) ~ #label-input {
|
|
top: -20% !important;
|
|
left: 2px !important;
|
|
transform: scale(0.8);
|
|
background: white;
|
|
color: black;
|
|
padding: 0 6px;
|
|
opacity: 1;
|
|
}
|
|
|
|
#input {
|
|
transition: outline 0.2s ease;
|
|
font-size: 1rem;
|
|
outline-color: var(--button-text);
|
|
outline: unset;
|
|
border: 1px solid #bbbbbb;
|
|
padding: 17px 10px 10px 17px;
|
|
width: 100%;
|
|
}
|
|
|
|
#input:focus {
|
|
box-shadow: 0 0 0 1px #e8e8e8, 0 0 0 3px rgb(92, 127, 202);
|
|
}
|
|
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
|
|
</style>
|