Missing.css aims to style HTML nicely without authors needing to concern themselves over anything other than using HTML tags with correct meanings, but this is not always feasible. Forms are a particularly complex part of HTML, with multiple ways to mark up the same semantics. For instance, you can label an element in multiple ways:

  <label>Name <input></label>
  <!-- or... -->
  <label for="adr">Address</label> <input id="adr">

Because of this, it's not really possible to write a stylesheet that will work with any HTML form.

Missing.css will work best on forms that follow these markup conventions:

§ Inputs and labels

Inputs inside labels will be display: inline. Inputs outside labels will be display: block.

§ Tabular forms

You can use the .table and .rows classes to create a form with inputs lined up.

<form class="table rows">
  <p><label for=inp>Label</label> <input id=inp></p>
A tabular form

§ Labeling radio buttons

The accepted way to label a group of radio buttons is to use <fieldset> and <legend>:

    <li><label><input type=radio name=color value="ff0000">Red</label>
    <li><label><input type=radio name=color value="00ff00">Green</label>
    <li><label><input type=radio name=color value="0000ff">Blue</label>

This works in missing.css, but these two elements are [notorious] for being hard to style. You can use the following pattern instead:

Note the role, aria-labelledby and the ID on the label itself.
<div role=radiogroup aria-labelledby=color-lbl>
  <span id=color-lbl>Color</span>
    <div><label><input type=radio name=color value="ff0000"> Red</label></div>
    <div><label><input type=radio name=color value="00ff00"> Green</label></div>
    <div><label><input type=radio name=color value="0000ff"> Blue</label></div>

The above will work with tabular forms:

A radiogroup in a tabular form

Last updated