Tony's Collections
Tony's Bundles
tony /
Styled Forms
Styled Forms
Styled Forms makes your forms look nice out of the box.
- Customize colors, border radius and sizing.
- Adds a down arrow chevron to select dropdowns.
- On mobile, removes padding and collapses down for more real estate.
Setup
Add Styled Forms to your page. Copy-paste the Code section below or load it from the cdn.
<link href="https://hypergist.io/gists/tony/styled-forms/latest.css" rel="stylesheet" media="screen" />
To apply styling to form elements, just make sure they're inside a form tag.
<form> <input type="text" name="first_name" placeholder="Enter your first name"> </form>
If necessary, tweak the variables to your liking.
:root { --form-input-width: 100%; }
Removing Styles Individually
To remove default styles from the entire form, add the .no-style
class to the form.
<form class="no-style">
<input type="text" name="first_name" placeholder="Enter your first name">
</form>
To remove styles from individual elements, add the .no-style
class to the element.
<form>
<input class="no-style" type="text" name="first_name" placeholder="Enter your first name">
</form>
:root {
/* For form styling */
--bg-primary: var(--color-alpha);
--bg-primary-dark: var(--color-alpha-dark);
--form-input-border-color-focus: var(--color-alpha);
--form-input-border-color: #e5e7eb;
--form-input-border-color-invalid: rgba(239, 68, 68);
--form-input-border-width: 2px;
--form-input-border-width-small-screens: 0 0 1px 0;
--form-input-border-radius: .3rem;
--form-input-border-radius-small-screens: 0;
--form-input-padding-small-screens: 0.5rem 0rem;
--form-input-padding: 0.7rem;
--form-input-height: 3rem;
--form-select-line-height: 1.2rem;
--form-input-width: 100%;
--form-label-font-size: 1rem;
--form-bold-font-weight: 600;
}
/* Forms */
form:not(.no-style) label:not(.no-style) {
font-size: var(--form-label-font-size, 1.25rem);
font-weight: var(--form-bold-font-weight, 600);
cursor: pointer;
}
form:not(.no-style) [type='text']:not(.no-style),
form:not(.no-style) [type='email']:not(.no-style),
form:not(.no-style) [type='url']:not(.no-style),
form:not(.no-style) [type='password']:not(.no-style),
form:not(.no-style) [type='number']:not(.no-style),
form:not(.no-style) [type='date']:not(.no-style),
form:not(.no-style) [type='datetime-local']:not(.no-style),
form:not(.no-style) [type='month']:not(.no-style),
form:not(.no-style) [type='search']:not(.no-style),
form:not(.no-style) [type='tel']:not(.no-style),
form:not(.no-style) [type='time']:not(.no-style),
form:not(.no-style) [type='week']:not(.no-style),
form:not(.no-style) [multiple]:not(.no-style),
form:not(.no-style) textarea:not(.no-style),
form:not(.no-style) select:not(.no-style) {
border-width: var(--form-input-border-width-small-screens, 0 0 1px 0 );
border-radius: var(--form-input-border-radius-small-screens, 0);
padding: var(--form-input-padding-small-screens, 0.5rem 0rem);
width: var(--form-input-width, 100%);
transition : border 500ms ease-out;
}
form:not(.no-style) [type='search']:not(.no-style) {
padding-left: var(--form-input-search-padding-left, 2.5rem) !important;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-4.35-4.35M17.5 11a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z'/%3E%3C/svg%3E");
background-position: left .5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
}
form:not(.no-style) [type='text']:focus:not(.no-style),
form:not(.no-style) [type='email']:focus:not(.no-style),
form:not(.no-style) [type='url']:focus:not(.no-style),
form:not(.no-style) [type='password']:focus:not(.no-style),
form:not(.no-style) [type='number']:focus:not(.no-style),
form:not(.no-style) [type='date']:focus:not(.no-style),
form:not(.no-style) [type='datetime-local']:focus:not(.no-style),
form:not(.no-style) [type='month']:focus:not(.no-style),
form:not(.no-style) [type='search']:focus:not(.no-style),
form:not(.no-style) [type='tel']:focus:not(.no-style),
form:not(.no-style) [type='time']:focus:not(.no-style),
form:not(.no-style) [type='week']:focus:not(.no-style),
form:not(.no-style) [multiple]:focus:not(.no-style),
form:not(.no-style) textarea:focus:not(.no-style),
form:not(.no-style) select:focus:not(.no-style) {
outline: none;
border-color: var(--form-input-border-color-focus, #191919);
}
form:not(.no-style) [type='submit']:not(.no-style) {
background-color: var(--bg-primary,#191919);
border-radius: var(--form-input-border-radius, 0.25rem);
text-transform: uppercase;
letter-spacing: 0.04em;
border: 0;
box-sizing: border-box;
color: var(--bg-primary-text, #fff);
cursor: pointer;
display: inherit;
font-weight: var(--form-bold-font-weight, 600);
margin: 0;
position: relative;
text-align: center;
user-select: none;
-webkit-user-select:none;
touch-action: manipulation;
vertical-align: baseline;
transition: all .2s cubic-bezier(.22, .61, .36, 1);
width: 100%;
}
form:not(.no-style) [type='submit']:hover:not(.no-style) {
transform: translateY(-2px);
background-color: var(--bg-primary-dark,#000);
}
@media (min-width: 640px) {
form:not(.no-style) [type='text']:not(.no-style),
form:not(.no-style) [type='email']:not(.no-style),
form:not(.no-style) [type='url']:not(.no-style),
form:not(.no-style) [type='password']:not(.no-style),
form:not(.no-style) [type='number']:not(.no-style),
form:not(.no-style) [type='date']:not(.no-style),
form:not(.no-style) [type='datetime-local']:not(.no-style),
form:not(.no-style) [type='month']:not(.no-style),
form:not(.no-style) [type='search']:not(.no-style),
form:not(.no-style) [type='tel']:not(.no-style),
form:not(.no-style) [type='time']:not(.no-style),
form:not(.no-style) [type='week']:not(.no-style),
form:not(.no-style) [multiple]:not(.no-style),
form:not(.no-style) textarea:not(.no-style),
form:not(.no-style) select:not(.no-style) {
border-color: var(--form-input-border-color, #e5e7eb);
border-width: var(--form-input-border-width, 2px);
border-radius: var(--form-input-border-radius, 0.25rem);
padding: var(--form-input-padding, 0.75rem);
}
form:not(.no-style) [type='text']:not(.no-style).invalid,
form:not(.no-style) [type='email']:not(.no-style).invalid,
form:not(.no-style) [type='url']:not(.no-style).invalid,
form:not(.no-style) [type='password']:not(.no-style).invalid,
form:not(.no-style) [type='number']:not(.no-style).invalid,
form:not(.no-style) [type='date']:not(.no-style).invalid,
form:not(.no-style) [type='datetime-local']:not(.no-style).invalid,
form:not(.no-style) [type='month']:not(.no-style).invalid,
form:not(.no-style) [type='search']:not(.no-style).invalid,
form:not(.no-style) [type='tel']:not(.no-style).invalid,
form:not(.no-style) [type='time']:not(.no-style).invalid,
form:not(.no-style) [type='week']:not(.no-style).invalid,
form:not(.no-style) [multiple]:not(.no-style).invalid,
form:not(.no-style) textarea:not(.no-style).invalid,
form:not(.no-style) select:not(.no-style).invalid {
border-color: var(--form-input-border-color-invalid, rgba(239, 68, 68));
}
}
form:not(.no-style) select:focus:not(.no-style).invalid {
border-color: var(--form-input-border-color-invalid, rgba(239, 68, 68));
}
form:not(.no-style) input:not([type="checkbox"]):not(.no-style),
form:not(.no-style) select:not(.no-style),
form:not(.no-style) label:not(.no-style) {
height: var(--form-input-height, 50px);
line-height: var(--form-input-height, 50px);
}
form:not(.no-style) select:not(.no-style) {
line-height: var(--form-select-line-height, 1.2rem);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' aria-hidden='true' viewBox='0 0 10 6'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
background-position: right .75rem center;
background-repeat: no-repeat;
background-size: .75em .75em;
padding-inline-end: 2rem;
}
Add this to the <head> of your page