<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.