Form Elements

Buttons, Inputs, Dropdowns, and More

There are certain places where the default styles in browsers just aren't good enough or too inconsistent between the various browsers. One of the most worst areas of this are the various form elements, so Frow provides a consistant starting point across browsers for you to build off of.

<label>
  Name
  <input type="text" placeholder="Placeholder Text"></input>
</label>

<label>
  Zipcode
  <input type="tel" maxlength="5"></input>
</label>

<label>
  Dropdown
  <select>
    <optgroup label="Group 1">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </optgroup>
  </select>
</label>

<label class="row-start">
  <input type="checkbox"></input>
  Option 1
</label>

<label class="row-start">
  <input type="radio" name="group-one" checked></input>
  Option 1
</label>

<div class="frow justify-around">
  <button class="col-xs-3-10">Regular</button>
  <button class="col-xs-3-10" disabled>Disabled</button>
  <a type="button" class="col-xs-3-10">Anchor</a>
</div>
Anchor

Important Note: Not every browser allows all elements to be styled. For example, Firefox doesn't allow much alteration to checkboxes, they will be as ugly or pretty as Mozilla chooses. A quick Google search will turn up many alternative "hacks" to style the things browsers can't natively. Most are using display:none to hide the actual element and hack the label into the shape desired. If you need a specific look for an element, you can of course utilize a hack in your custom CSS, but for simplicity Frow doesn't include any so that you may write standard code.

Labels

To improve the usefulness of wrapping labels around form elements, labels by default are display:flex. You can use any of the Frow Shortcuts to alter the behavior of contents within the label.

<label>
  Address
  <input></input>
</label>

<label class="column-center">
  Address
  <input></input>
</label>

<label class="row-start">
  Address
  <input></input>
</label>
Customize To Your Liking

Frow's elements are a simple starting point ready for customization. Whether you love the default look and just want to add a splash of color, or want to do a big overhaul, Frow has provided you with a great starting point across all browsers. Make the design yours!

<style>
  select.my-custom-select {
    border: 0;
    border-radius: 3px;
    background-color: lightseagreen;
    color: #fff;
  }
  button.my-custom-button {
    background: none;
    border: 2px solid lightseagreen;
    color: lightseagreen;
  }
</style>
Goodies

Frow is from Cody Sherman via Beg.in