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

1. 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" />
   

2. 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>
   

3. 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;
}