28 CSS Input Field Designs 02 / 28
Underline Sweep
Minimal underline-style input.
The code
<label class="if-line">
<span class="if-line-label">Username</span>
<span class="if-line-wrap">
<input type="text" name="username" autocomplete="username" placeholder="@codefronts" required />
</span>
</label> <label class="if-line">
<span class="if-line-label">Username</span>
<span class="if-line-wrap">
<input type="text" name="username" autocomplete="username" placeholder="@codefronts" required />
</span>
</label>.if-line {
display: grid;
gap: 6px;
width: 100%;
max-width: 280px;
font-size: 11px;
color: #b8b6d4;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.if-line-wrap {
position: relative;
display: block;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.if-line-wrap::after {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: -1px;
height: 2px;
background: linear-gradient(90deg, #ff6c8a, #ff9a76);
transition:
left 0.3s ease,
right 0.3s ease;
}
.if-line-wrap:focus-within::after {
left: 0;
right: 0;
}
.if-line input {
width: 100%;
box-sizing: border-box;
padding: 8px 0 9px;
background: transparent;
border: 0;
outline: none;
color: #f0eeff;
font-size: 14px;
letter-spacing: 0;
text-transform: none;
}
.if-line input::placeholder {
color: #b8b6d4;
} .if-line {
display: grid;
gap: 6px;
width: 100%;
max-width: 280px;
font-size: 11px;
color: #b8b6d4;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.if-line-wrap {
position: relative;
display: block;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.if-line-wrap::after {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: -1px;
height: 2px;
background: linear-gradient(90deg, #ff6c8a, #ff9a76);
transition:
left 0.3s ease,
right 0.3s ease;
}
.if-line-wrap:focus-within::after {
left: 0;
right: 0;
}
.if-line input {
width: 100%;
box-sizing: border-box;
padding: 8px 0 9px;
background: transparent;
border: 0;
outline: none;
color: #f0eeff;
font-size: 14px;
letter-spacing: 0;
text-transform: none;
}
.if-line input::placeholder {
color: #b8b6d4;
}