Tag: accent-color

CSS accent-color Property

What is accent-color ?

The accent-color CSS property applies the custom accent-color for user-interface controls like  <input type=”checkbox”>, <input type=”radio”>, <input type=”range”> and <progress> .

For Example, default color of checkbox for the following code is as follows

.task-checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  cursor: pointer;
}

After applying accent-color as red, it will show as follows

.task-checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  cursor: pointer;
  accent-color: red;
}

NOTE: By default, browser choose the accent-color. if we need any specific color, we need to give it manually like above.