Skip to content

Instantly share code, notes, and snippets.

@colevscode
Last active July 20, 2024 07:17
Show Gist options
  • Save colevscode/ce67075b62f843b7e95b1d5a1370035b to your computer and use it in GitHub Desktop.
Save colevscode/ce67075b62f843b7e95b1d5a1370035b to your computer and use it in GitHub Desktop.
Formspree universal form styles
/* reset */
form input,
form select,
form textarea,
form fieldset,
form optgroup,
form label,
.StripeElement {
font-family: inherit;
font-size: 100%;
color: inherit;
border: none;
border-radius: 0;
display: block;
width: 100%;
padding: 0;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
}
form label,
form legend {
font-size: 0.825rem;
margin-bottom: 0.5rem;
}
/* border, padding, margin, width */
form input,
form select,
form textarea,
.StripeElement {
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.2);
background-color: rgba(255, 255, 255, 0.9);
padding: 0.75em 1rem;
margin-bottom: 1.5rem;
}
form input:focus,
form select:focus,
form textarea:focus,
.StripeElement:focus {
background-color: white;
outline-style: solid;
outline-width: thin;
outline-color: gray;
outline-offset: -1px;
}
form [type="text"],
form [type="email"],
.StripeElement {
width: 100%;
}
form [type="button"],
form [type="submit"],
form [type="reset"] {
width: auto;
cursor: pointer;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}
form [type="button"]:focus,
form [type="submit"]:focus,
form [type="reset"]:focus {
outline: none;
}
form select {
text-transform: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment