Forms are an important data capture or query format. They might be used to select product features (size, colour, quantity), or to search and refine products, or to contact you.
We mask the standard select box with our own style because select boxes look different in various browsers and devices, most noticably between Apple and PC.
The example shown shows how the select is wrapped in a <div> tag with a child <div class="ff-select__mask"> showing the mask or style we want, a solid grey button effect.
Example
Like all inputs, we remove any border radius (rounded edges) and pad the elements well to give a feeling of space. Placeholder text is entirely optional and can be left blank.
Examples
Similarly to select boxes and radio buttons, we mask the default because it appears differently in varying browsers and devices, and we want it to be consistent. These items can be inline or stacked, and styles will space these appropriately.
By assigning a for element on the label and an id element on the input that match, we can click the label/title OR the box to select it.
Example
Again, like select boxes and checkboxes, we mask the default because it appears differently and we want it to be consistent. These items can be inline or stacked, and styles will space these appropriately.
By assigning a for element on the label and an id element on the input that match, we can click the label/title OR the box to select it.
Example
We use buttons within forms and also as CTAs (call-to-actions). This is detailed within it's own dedicated Buttons section here.