Menu
When I set autofocus="autofocus" on an input element, then in Firefox, when the page loads, it displays for a split second without the CSS applied. (E.g. content not centered, heading rendered in default font etc.)
If I remove the autofocus, the page loads fine and displays when it is ready.
Is there a way to get the page to load normally while using the autofocus feature in Firefox?
279
If you want to remove the focus around a button, you can use the CSS outline property. You need to set the “none” value of the outline property.
The first input or textarea in source order that has the autofocus attribute will be focused on page load. In browsers without autofocus support, no fields will be focused on page load, unless otherwise given focus with JavaScript.
The autofocus attribute is a boolean attribute. When present, it specifies that an <input> element should automatically get focus when the page loads.
I have found that by adding some JavaScript in the <head>, the page waits for the style to load before the focus.
I'm not exactly sure why this works, but it does!
Example:
<script type="text/javascript">
// Fix for Firefox autofocus CSS bug
// See: http://stackoverflow.com/questions/18943276/html-5-autofocus-messes-up-css-loading/18945951#18945951
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With