mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
83 lines
No EOL
1.5 KiB
HTML
83 lines
No EOL
1.5 KiB
HTML
<div class="input-group">
|
|
<input
|
|
class="input-text"
|
|
name="text"
|
|
type="text"
|
|
placeholder="Type here"
|
|
autocomplete="off"
|
|
/>
|
|
<label class="input-text-label" for="text">Type here</label>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by Lucaasbre - Tags: simple, red, minimalist, black, input, dark, login , input effect */
|
|
.input-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
position: relative;
|
|
padding: 7px 0 0;
|
|
width: 80%;
|
|
margin-bottom: 10px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.input-text {
|
|
font-family: inherit;
|
|
width: 100%;
|
|
border: none;
|
|
border-bottom: 2px solid #7f7f7f;
|
|
border-radius: 0 !important;
|
|
outline: 0;
|
|
font-size: 17px;
|
|
color: #7f7f7f;
|
|
padding: 7px 0;
|
|
background: transparent;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.input-text::placeholder {
|
|
color: transparent;
|
|
}
|
|
|
|
.input-text:placeholder-shown ~ .input-text-label {
|
|
font-size: 17px;
|
|
cursor: text;
|
|
}
|
|
|
|
.input-text-label {
|
|
position: absolute;
|
|
display: block;
|
|
transition: 0.2s;
|
|
font-size: 17px;
|
|
color: #7f7f7f;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.input-text:focus {
|
|
padding-bottom: 6px;
|
|
border-width: 3px;
|
|
border-image: linear-gradient(to right, #dd0033, #9f1026);
|
|
border-image-slice: 1;
|
|
}
|
|
|
|
.input-text:focus ~ .input-text-label {
|
|
color: #dd0033;
|
|
}
|
|
|
|
.input-text:not(:placeholder-shown) ~ .input-text-label,
|
|
.input-text:focus ~ .input-text-label {
|
|
position: absolute;
|
|
display: block;
|
|
transition: 0.2s;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
top: -17px;
|
|
}
|
|
|
|
.input-text:required,
|
|
.input-text:invalid {
|
|
box-shadow: none;
|
|
}
|
|
|
|
</style>
|
|
|