front_end/ui/components/input/checkbox.css

/*
 * Copyright 2021 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

input[type="checkbox"] {
  width: 12px;
  height: 12px;
  accent-color: var(--sys-color-primary-bright);
  color: var(--sys-color-on-primary);
  position: relative;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover::after,
  &:active::before {
    content: "";
    height: 24px;
    width: 24px;
    border-radius: var(--sys-shape-corner-full);
    position: absolute;
  }

  &:not(:disabled):hover::after {
    background-color: var(--sys-color-state-hover-on-subtle);
  }

  &:not(:disabled):active::before {
    background-color: var(--sys-color-state-ripple-neutral-on-subtle);
  }

  &:not(:disabled):focus-visible::before {
    content: "";
    height: 15px;
    width: 15px;
    border-radius: 5px;
    position: absolute;
    border: 2px solid var(--sys-color-state-focus-ring);
  }

  &.small:hover::after,
  &.small:active::before {
    height: 12px;
    width: 12px;
    border-radius: 2px;
  }
}