HTML
<form class="pa4 black-80">
<div class="measure">
<label for="name" class="f6 b db mb2">Name <span class="normal black-60">(optional)</span></label>
<input id="name" class="input-reset ba b--black-20 pa2 mb2 db w-100" type="text" aria-describedby="name-desc">
<small id="name-desc" class="f6 black-60 db mb2">Helper text for the form control.</small>
</div>
</form>
css
.ba {
border-style: solid;
border-width: 1px;
}
.b--black-20 {
border-color: rgba(0, 0, 0, .2);
}
.db {
display: block;
}
.normal {
font-weight: normal;
}
.b {
font-weight: bold;
}
.input-reset {
-webkit-appearance: none;
-moz-appearance: none;
}
.input-reset::-moz-focus-inner {
border: 0;
padding: 0;
}
.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 {
max-width: 30em;
}