CSS :default: mark the form's default action, not the last clicked button

When to use it

A review form has Save draft and Send for approval actions. The first associated submit button is the form's default action, so the product team must decide whether pressing Enter from a text field should save or send. Put the safer Save draft action first in document order, give both controls explicit type and name values, and style only the default submitter inside this form. Test Enter from each text field, pointer activation of each button, disabled states, a button associated through form ID outside the form subtree, and the server's handling of each submitted name-value pair. CSS cannot change which action Enter triggers. If order is wrong, fix the HTML and request handling; a visual border on Send for approval would only mislead. Also verify that a button of another type placed first does not create an accidental assumption about default submission.

.review-actions button[type="submit"] { border: 2px solid #6b818c; background: #fff; color: #173441; }
.review-actions button[type="submit"]:default { border-color: #1c5e87; background: #e6f2f8; }
.review-actions button:focus-visible { outline: 3px solid #1c5e87; outline-offset: 2px; }

Cost and verification

The selector is inexpensive, but the action has a high correctness cost if the form order and server contract are unclear. Do not rely on color alone to explain what a button does: the visible text must name the action. A default button can still be disabled, and the styling must not suggest it is available when it is not. A broad :default rule may also catch radio inputs or options, so scope the selector to submit buttons in the intended component. Test real keyboard submission rather than inferring behavior from a screenshot. Server authorization and validation remain mandatory regardless of which submitter was used.

Common Mistakes

• Do not use :default as a synonym for the last clicked control.
• Do not paint a different action as default while HTML order says otherwise.
• Do not forget explicit button types and server-side action checks.

Connected lessons

• CSS Property Decisions
• CSS form states: make errors and disabled fields explicit
• CSS focus-visible: keep keyboard location unmistakable
• HTML button type: make every form action explicit
• HTML submitter value: identify which button sent the form