HTML
<form class="pa4 black-80">
<div class="measure-narrow">
<label for="password" class="f6 b db mb2">Password</label>
<input class="input-reset ba b--black-20 pa2 mb2 db w-100" type="password" id="password" aria-describedby="password-desc">
<small id="password-desc" class="f6 lh-copy black-60 db mb2">
Must be 9 characters long and contain both a number and an uppercase
character.
</small>
</div>
</form>
css
.ba {
border-style: solid;
border-width: 1px;
}
.b--black-20 {
border-color: rgba(0, 0, 0, .2);
}
.db {
display: block;
}
.b {
font-weight: bold;
}
.input-reset {
-webkit-appearance: none;
-moz-appearance: none;
}
.input-reset::-moz-focus-inner {
border: 0;
padding: 0;
}
.lh-copy {
line-height: 1.5;
}
.w-100 {
width: 100%;
}
.black-80 {
color: rgba(0, 0, 0, .8);
}
.black-60 {
color: rgba(0, 0, 0, .6);
}
.pa2 {
padding: .5rem;
}
.pa4 {
padding: 2rem;
}
.mb2 {
margin-bottom: .5rem;
}
.f6 {
font-size: .875rem;
}
.measure-narrow {
max-width: 20em;
}