Remove outline from select box in FF

web-development

responsive-design

accessibility

best-practices

byNikita Barsukov·Nov 23, 2024

To eliminate the -moz-focusring pseudo-class employed by Firefox on a select box, override it using the color and text-shadow CSS properties. Then, set the outline to none for when the select element is in focus.

select:-moz-focusring {
    color: transparent; /* Hides the text color when the outline appears - clever, right? 😜 */
    text-shadow: 0 0 0 #000; /* Just a shadow puppet of the actual text color. */
}

select:focus {
    outline: none; /* outline: be gone! */
}

UI considerations without sacrificing accessibility

When you choose to ditch the outlines, ensure that the accessibility factor isn't compromised. Keyboard navigation is essential!

Tweaking the elements for a better user interface

A padding and border reduction using ::-moz-focus-inner for Firefox comes in handy.
Enhance styles for dropdown boxes using libraries like Select2.
Depict the visual status using custom dropdown arrows.

Understanding compatibility – a lesson on avoiding breaks across browsers

Apply Modernizr for feature-detection, targeting only the relevant browsers.
Resort to rgba(0,0,0,0) for transparency in case of IE9.
Use @-moz-document for Firefox-specific CSS rules.

Opting accessibility over aesthetics

While going for a neat UI, don't let the usability factor take the back seat. Find ways to keep the balance intact.

Accessibility should not be compromised in design

Highlight the crucial role of visual cues in improving keyboard navigation.
Normalize styles across browsers using a CSS reset.
Ensure that changes in styles do not wreak havoc in other pages or elements.

Aesthetics vs usability – the eternal conflict

Keep a fine balance between an impressive visual interface and a fluid user-experience.
Be prepared to make adjustments as browser updates might affect styles.
Understand the viability of the upcoming :focus-visible for future browser outline styling.

Enhancing control - The road to a refined UI

Let's get our hands dirty, and turn the basic select box functionality into a masterpiece!

Including aesthetics & performance upgrades

Consider SVGs for custom icons in lieu of basic arrows or dropdown box.
Layout the form elements responsively using CSS Grid and Flexbox.
Utilize ARIA roles and attributes to retain accessibility for custom elements.

Coding enhancements for a seamless UI

Work some JavaScript magic for interactive focus animations.
Libraries like Choices.js can impart a feature-rich select box with built-in accessible features.
Implement polyfills to bridge compatibility gaps in older browsers.

explain-codes / Web development / Remove outline from select box in FF

Linked

Change Select List Option background color on hover



Preventing an image from being draggable or selectable without using JS



Ellipsis for overflow text in dropdown boxes



Dropdownlist width in IE



Remove inner shadow of text input

