Checkbox color darkens on hover

Question

I have changed the color of my checkboxes when they are checked to not be the default light blue using the following CSS:

input[type="checkbox"] {
  accent-color: var(--red);
}

I tried using the :hover pseudo-selector however it still darkens it.

:root {
  --red: #ee5d5a;
}

input[type="checkbox"] {
  accent-color: var(--red);
  margin-right: 10px;
}

input[type="checkbox"]:hover {
  accent-color: var(--red);
}

<input id="two" type="checkbox" checked>General

Answer 1

Just Add This you get the exact color which you use for your default checkbox

input[type=checkbox]:hover{ filter: brightness(1.5); }