Accent Color, Appearance and Form Validation
What Is It?
CSS can tune native form controls while preserving their HTML semantics and built-in interaction.
Properties, Tags and Attributes Explained
accent-color: Changes the accent used by supported controls such as checkboxes and radios.appearance: Controls native widget appearance; none removes native styling where supported.caret-color: Sets the text insertion caret color.:required / :valid / :invalid: Match HTML form constraints and validity states.::placeholder: Styles placeholder text, which does not replace a visible label.
Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.
Example 1: Native accent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accent Color, Appearance and Form Validation</title>
<style>
input { accent-color: #7c3aed; }
</style>
</head>
<body>
<label><input type="checkbox" checked> Study CSS today</label><br><label><input type="radio" name="track" checked> Beginner track</label>
</body>
</html>What you see: Supported native controls use purple accents.
Example 2: Caret and placeholder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accent Color, Appearance and Form Validation</title>
<style>
input { caret-color: #db2777; padding: 10px; font: inherit; }
input::placeholder { color: #64748b; }
</style>
</head>
<body>
<label for="topic">Topic</label> <input id="topic" placeholder="e.g. Flexbox">
</body>
</html>What you see: The text field uses a pink insertion caret and a muted placeholder.
Example 3: Validation states
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accent Color, Appearance and Form Validation</title>
<style>
input { padding: 8px; border: 2px solid #64748b; }
input:invalid { border-color: #b91c1c; }
input:valid { border-color: #15803d; }
</style>
</head>
<body>
<label for="mail">Email (required)</label> <input id="mail" type="email" required aria-describedby="hint"><p id="hint">Enter an address such as alex@example.com.</p>
</body>
</html>What you see: The required field is red while invalid and green when it contains a valid email form.
Example 4: Replace native button appearance deliberately
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accent Color, Appearance and Form Validation</title>
<style>
button { appearance: none; font: inherit; border: 2px solid #1d4ed8; border-radius: 8px; padding: 12px 20px; color: #1d4ed8; background: #eff6ff; }
button:focus-visible { outline: 3px solid #ea580c; outline-offset: 3px; }
button:active { background: #bfdbfe; }
</style>
</head>
<body>
<button type="button">Custom styled, native button semantics</button>
</body>
</html>What you see: The actual button keeps keyboard and semantic behavior while its visual appearance is explicitly defined. Use appearance none only when you will restore clear boundaries, states, and focus styling.
When and Where to Use It
Prefer accent-color when a native control only needs branding. Preserve labels, focus, keyboard behavior, and clear validation messages.
Common Mistake or Useful Tip
These selectors can mark untouched required fields invalid immediately. Real forms often delay error messages until interaction or submission.
Try It Yourself
Try appearance: none on a checkbox, then remove it; note the work required to restore a clear checked state.