Develop With Faith
September 16, 2026

The New Customizable `<select>` Element Is Quietly Fixing Church Giving Forms

Open the giving page of almost any church website and you'll find the same friction hidden in the same place: the fund dropdown. A donor picks an amount, sets the frequency, and then hits a plain gray <select> that looks nothing like the rest of the form — different font, different corners, no icon, no room for a sentence of context. So the church builds a "designed" replacement out of divs, wires up its own keyboard handling, and quietly loses the screen-reader users along the way.

The browser now does the job natively.

What actually changed

The customizable <select> element lets you opt in to a fully stylable dropdown with a single CSS declaration, keep the native accessibility of a real form control, and put arbitrary HTML — icons, descriptions, badges — inside each <option>. There is no library, no popover script, and no hand-rolled combobox.

The opt-in is one line:

select,
::picker(select) {
  appearance: base-select;
}

That switches both the button on the page and the option picker into the "base" appearance the browser exposes for styling. From there, everything inside the select — the currently selected label, the individual options, the picker itself — is styled with ordinary CSS. Older browsers ignore the declaration and render the exact same <select> they always have. That is the entire progressive-enhancement story.

What it unlocks on a church giving form

Take a fund dropdown that lists Tithe, Missions, Building, and Benevolence. In the old world, each option was five words of unstyled text. In the new world, the markup is still a <select>:

<label for="fund">Give to</label>
<select id="fund" name="fund">
  <selectedcontent></selectedcontent>

  <option value="tithe">
    <span class="fund-icon" aria-hidden="true">🤲</span>
    <span class="fund-name">General Tithe</span>
    <span class="fund-note">Weekly ministry &amp; staff</span>
  </option>

  <option value="missions">
    <span class="fund-icon" aria-hidden="true">🌍</span>
    <span class="fund-name">Missions</span>
    <span class="fund-note">Partners in 14 countries</span>
  </option>

  <option value="building">
    <span class="fund-icon" aria-hidden="true">🏛️</span>
    <span class="fund-name">Building Fund</span>
    <span class="fund-note">Capital campaign, phase 2</span>
  </option>
</select>

<selectedcontent> mirrors whichever option is currently chosen into the closed button, so the label the donor sees on the form is the same rich content they picked in the picker — icon, name, and the short note. The screen reader still hears "combobox, Missions, expanded"; the keyboard still moves through options with the arrow keys; the mobile browser still shows its native picker on devices where that is a better experience.

A little CSS turns the list itself into something that belongs on the page:

select { padding: 0.75rem 1rem; border-radius: 0.75rem; }
::picker(select) { border-radius: 0.75rem; padding: 0.5rem; }
option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
}
option:hover, option:checked { background: var(--brand-gold-tint); }
.fund-note { grid-column: 2; color: var(--muted); font-size: 0.875rem; }

No focus-trap script. No aria-expanded you have to remember to toggle. No third-party dependency to keep patched.

Why this matters for churches and faith nonprofits

Most churches we work with are running lean. The person maintaining the giving page is often the same person running Sunday's slides. Every custom widget on the site is a small future tax — a broken keyboard behavior a year from now, a screen-reader regression after a library upgrade, a plugin that suddenly costs $19/month. A native, styleable <select> collapses that tax to almost nothing.

It also lets the giving form finally match the tone of the rest of the site. A ministry that spends real care on its typography and photography can be undone by a stock system dropdown at the exact moment a donor is deciding to give. The new element closes that gap without asking anyone to give up the accessibility they were counting on.

What to check before shipping

A few practical notes from the projects where we've rolled this out this year:

  • Feature-detect, don't user-agent-detect. CSS.supports('appearance', 'base-select') is enough to decide whether to layer the enhanced styles.
  • Keep the plain <select> accessible on its own. If the enhanced version never loaded, the page must still be usable. That is the whole point of the fallback.
  • Test with a real screen reader. VoiceOver on iOS and NVDA on Windows are the two that matter most for donation flows in the U.S.; both handle the base-appearance select correctly today.
  • Do not put form controls inside <option>. The element is for display; interactive controls inside options break the semantics and the keyboard model.

Churches don't need flashier giving forms. They need forms that quietly disappear so the gift can happen. If your donation page is fighting the design of the rest of your site — or if you inherited a custom dropdown that no one is quite sure how to maintain — we can help you migrate to the native element and get an afternoon of your team's time back next week.

← Back to all posts