mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
79 lines
No EOL
1.9 KiB
HTML
79 lines
No EOL
1.9 KiB
HTML
<div class="formContainer">
|
|
<input placeholder="example@email.com" type="text" />
|
|
<label>Email</label>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by pablofernz - Tags: email, form, input, dark, darkmode, dark mode, example */
|
|
.formContainer {
|
|
height: 100%;
|
|
/* change the width here if you want */
|
|
width: 300px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column-reverse;
|
|
/* explanation: Reverse make the label appear visually above the input, when in the HTML it is below so that the "+" selector can work */
|
|
gap: 10px;
|
|
position: relative;
|
|
}
|
|
|
|
/* This selects the label inside "formContainer*/
|
|
.formContainer > label {
|
|
font-family: Basier Square;
|
|
font-weight: 900;
|
|
font-size: 15px;
|
|
color: rgb(99, 99, 99);
|
|
text-align: start;
|
|
align-self: flex-start;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* This selects the input inside "formContainer*/
|
|
.formContainer > input {
|
|
width: 100%;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
font-weight: 900px;
|
|
background-color: transparent;
|
|
color: rgb(99, 99, 99);
|
|
border: 2px solid rgb(85, 85, 85);
|
|
font-size: 15px;
|
|
font-family: Basier Square;
|
|
padding-left: 10px;
|
|
transition: all 0.3s ease;
|
|
z-index: 5;
|
|
}
|
|
|
|
/* If you give the input a class, this would be equal to:
|
|
.input:focus */
|
|
.formContainer > input:focus {
|
|
color: rgb(197, 197, 197);
|
|
outline: none;
|
|
border: 2px solid rgb(255, 255, 255);
|
|
box-shadow:
|
|
0px 0px 10px rgba(255, 255, 255, 0.145),
|
|
0px 0px 5px rgba(255, 255, 255, 0.145) inset;
|
|
}
|
|
|
|
/* This would be equal to: .input:focus+.label */
|
|
.formContainer > input:focus + label {
|
|
color: rgb(197, 197, 197);
|
|
text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.145);
|
|
}
|
|
|
|
/* This would be equal to: .input::placeholder */
|
|
.formContainer > input::placeholder {
|
|
color: rgb(85, 85, 85);
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
/* This would be equal to: .input:focus::placeholder */
|
|
.formContainer > input:focus::placeholder {
|
|
color: rgb(150, 150, 150);
|
|
}
|
|
|
|
/* <thx/> */
|
|
|
|
</style>
|
|
|