# How normalize.css Addresses Cross-Browser Differences in the Select Element

> Learn how normalize.css resolves cross-browser inconsistencies for the select element by resetting styles like font inheritance and margins, ensuring consistent presentation.

- Repository: [Nicolas Gallagher/normalize.css](https://github.com/necolas/normalize.css)
- Tags: deep-dive
- Published: 2026-03-07

---

**Normalize.css eliminates cross-browser inconsistencies in the `<select>` element by forcing font inheritance, removing default margins, and resetting text transformations, while documenting platform-specific limitations that resist normalization.**

The `<select>` element has historically suffered from fragmented default styling across browsers, with each vendor applying proprietary system fonts, margins, and text transformations. The [`necolas/normalize.css`](https://github.com/necolas/normalize.css/blob/main/necolas/normalize.css) repository addresses these discrepancies through surgical CSS rules that create a predictable baseline without stripping away essential native functionality. By targeting specific browser quirks documented in the source code, normalize.css ensures that the `select` element renders consistently whether viewed in Chrome, Firefox, Safari, Edge, or Internet Explorer.

## Font Inheritance and Margin Normalization

Browser vendors traditionally render `<select>` controls using system UI fonts that vary between operating systems, breaking visual continuity with the surrounding page design. In [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) at lines 60–68, the stylesheet forces all form controls—including `<select>`—to inherit the parent element's typography:

```css
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;   /* ensures the same font as the surrounding text */
  font-size: 100%;        /* uses the computed font size of the parent */
  line-height: 1.15;      /* normalizes line-height */
  margin: 0;              /* removes the default margin that Firefox/Safari add */
}

```

This rule specifically targets the **default margins** that Firefox and Safari inject around form controls, which cause misalignment in grid layouts. The `font-size: 100%` declaration prevents browsers from scaling the text unpredictably, while `line-height: 1.15` establishes a consistent vertical rhythm across platforms.

## Text Transform Reset

Some versions of Edge, Firefox, and Internet Explorer apply automatic `text-transform` styling to `<select>` elements, forcing text to appear in uppercase or lowercase regardless of the source HTML. Normalize.css neutralizes this behavior at lines 86–89:

```css
button,
select {                 /* 1 */
  text-transform: none;  /* removes any inherited transformation */
}

```

By explicitly setting `text-transform: none`, the stylesheet ensures that option text renders exactly as written in the markup, preserving intentional capitalization across all rendering engines.

## Documented Limitations on macOS

While normalize.css resolves many discrepancies, the README.md explicitly acknowledges constraints imposed by Chrome and Safari on macOS that resist CSS normalization. These browsers restrict styling of the `<select>` dropdown to **border properties only**, preventing modifications to internal padding, background colors, or the dropdown arrow. Additionally, the default `font-weight` of `<optgroup>` elements cannot be overridden safely in these environments due to platform rendering restrictions.

These documented limitations inform developers that while normalize.css provides a consistent baseline, further visual customization must work within the browsers' native control boundaries rather than attempting complete visual reconstruction.

## Practical Implementation

To leverage normalize.css for consistent `<select>` styling, import the stylesheet and layer custom designs on top of the normalized baseline:

```html
<!-- Import normalize.css via CDN -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">

<!-- Basic select inherits page typography uniformly -->
<select>
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
</select>

```

Apply custom borders—the most reliable stylable property across macOS and Windows:

```css
select {
  border: 2px solid #4a90e2;   /* works everywhere including macOS */
  background: #fff;
  padding: 0.4em 0.6em;
}

```

The result is a `<select>` element that matches your page's font stack, carries no unexpected margins, and displays consistent text casing while respecting platform-specific rendering constraints.

## Summary

- **Font inheritance rules** in [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) lines 60–68 force `<select>` elements to use the parent page's typography rather than system defaults.
- **Margin reset** eliminates the proprietary spacing that Firefox and Safari add to form controls.
- **Text-transform normalization** at lines 86–89 prevents Edge, Firefox, and IE from altering the case of option text.
- **macOS limitations** documented in the README explain why Chrome and Safari restrict styling to borders and prevent `optgroup` font-weight changes.
- The baseline approach allows developers to add intentional styles without fighting unpredictable browser defaults.

## Frequently Asked Questions

### Why does normalize.css force font inheritance on select elements?

Without explicit inheritance, browsers render `<select>` controls using system UI fonts (like Segoe UI on Windows or San Francisco on macOS) that differ from the page's design system. The `font-family: inherit` declaration ensures visual continuity between form controls and surrounding content.

### Which browsers apply default text-transform to select elements?

Legacy versions of Internet Explorer, Edge (EdgeHTML), and certain Firefox configurations automatically uppercase or otherwise transform text within `<select>` elements. The `text-transform: none` rule ensures text appears exactly as authored in the HTML source.

### Why can't I style select elements fully on macOS Chrome and Safari?

WebKit-based browsers on macOS render `<select>` dropdowns using native platform controls that resist CSS modifications beyond border styling. This is a deliberate platform security and usability choice by Apple, documented in the normalize.css README as a limitation that developers must design around.

### Does normalize.css remove all default styling from select elements?

No, normalize.css preserves essential native functionality while removing inconsistent defaults. The stylesheet maintains the dropdown arrow, focus states, and platform-specific interaction patterns, only normalizing the typography, spacing, and text transformation behaviors that vary between browsers.