<form onsubmit="return false;">
<ul>
<li>
<label for="username">Username</label>
<input type="text" id="username" />
</li>
<li>
<label for="password">Password</label>
<input type="password" id="password" />
</li>
<li>
<input type="submit" value="Log in" />
</li>
</ul>
</form>
:root {
--base: 8px;
--timing: 0.1s;
--focused: black;
--unfocused: darkgrey;
}
body {
background: silver;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
ul {
background: white;
border-radius: var(--base);
box-shadow: calc(var(--base)/2.5) calc(var(--base)/2.5) var(--base) var(--base) black;
font-size: calc(var(--base) * 2);
list-style-type: none;
margin: calc(var(--base) * 5) auto;
max-width: calc(var(--base) * 50);
padding: calc(var(--base) * 5);
}
li {
margin: var(--base) 0;
width: 100%;
label,
input:where([type="text"], [type="password"]) {
width: 100%;
}
label {
box-sizing: border-box;
display: block;
height: calc(var(--base) * 2.5);
transition: font-size var(--timing),
padding var(--timing),
color var(--timing);
}
input:where([type="text"], [type="password"]) {
border: {
color: black;
style: solid;
width: 0 0 1px;
}
}
&:has(label + input) label {
color: var(--unfocused);
font-size: calc(var(--base) * 1.5);
padding: calc(var(--base) / 2) 0 0;
}
&:has(label + input:focus) label {
color: var(--focused);
font-size: calc(var(--base) * 1.75);
padding: calc(var(--base) / 4) 0 0;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.