HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS :default Checkbox Example</title>
  <style>
  .prefs label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: #334155;
    cursor: pointer;
  }

  input[type="checkbox"]:default {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
    accent-color: #16a34a;
  }

  input[type="checkbox"]:default + span {
    color: #15803d;
    font-weight: 700;
  }
  </style>
</head>
<body>
  <div class="prefs">
    <label>
      <input type="checkbox" checked>
      <span>Subscribe to newsletter (default on)</span>
    </label>
    <label>
      <input type="checkbox">
      <span>Share usage data</span>
    </label>
  </div>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS :default Selector - Default Checkbox