Firefox: dotted outline around focused inputs

[silverwind]

These may be not intended:

[Randore]

Adding { outline: medium none; } will work.

[jkochis]

Please consider leaving the outline as it is. This is an important feature for users without a pointing device, such as a mouse or tap interface. If you want to remove it, at least provide alternative styling.

For more information:
http://www.outlinenone.com/

[silverwind]

The border-color is already changed to indicate focus, so I'd say it's fine to remove the outline:

spectre/src/forms.less

Line 24 in d1c1567

border-color: @core-color;

[nder]

Also outline is already cleared.

I guess it's specific to Firefox ::-moz-focus-inner behaviour, which should be easy to overcome (http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links).

[silverwind]

I've tried various -moz rules, but none seem to work in this case. What does work is adding !important to outline: 0. Really not sure why the outline of input is only appearing with spectre and not with other stylesheets.

[silverwind]

Found the cause of this outline in normalize.css:

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
input:-moz-focusring {
  outline: 1px dotted ButtonText;
}

The issue was fixed in necolas/normalize.css@b1f3b0c, which is released in v4.1.0.

@picturepan2 care to bump normalize.css to the latest version to resolve this?

[picturepan2]

I fixed it in ffe5499. Thanks.