gistfile1.md

Firefox inner outline on buttons

Firefox adds an inner outline to buttons (<input>s and <button>s) on :focus. Apparently it's for accessibility, but its placement seems rather odd. Use this CSS to override it:

input::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

You can see this fix in action in the same JS Bin example mentioned in the previous section.

Pro-Tip! Be sure to include some focus state on buttons, links, and inputs. Providing an affordance for accessibility is paramount, both for pro users who tab through content and those with vision impairments.

Always set a type on <button>s

The default value is submit, meaning any button in a form can submit the form. Use type="button" for anything that doesn't submit the form and type="submit" for those that do.

<button type="submit">Save changes</button>
<button type="button">Cancel</button>

For actions that require a <button> and are not in a form, use the type="button".

<button class="dismiss" type="button">x</button>

Fun fact: Apparently IE7 doesn't properly support the value attribute on <button>s. Instead of reading the attribute's content, it pulls from the innerHTML (the content between the opening and closing <button> tags). However, I don't see this as a huge concern for two reasons: IE7 usage is way down, and it seems rather uncommon to set both a value and the innerHTML on <button>s.