CSS accent-color Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 25 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The accent-color property in CSS is a relatively new addition that allows web developers to customize the color of user interface controls that are rendered by the browser. This includes elements such as checkboxes, radio buttons, and range sliders.

By using this property, you can ensure that these controls align with the overall design and color scheme of your website.

💡 Syntax

The syntax for the accent-color property is straightforward. It can be applied to any element that supports it, and you can specify a color using any valid CSS color value.

Syntax

Copied

element {
  accent-color: color;
}

Here, color can be a named color, a hexadecimal value, an RGB value, an HSL value, or any other valid CSS color value.

🎛️ Default Value

The default value of the accent-color property is the user agent's default styling, which typically means the colors are determined by the browser and the operating system.

🏠 Property Values

Value	Description
named-color	A color keyword, such as blue, red, green, etc.
hexadecimal value	A hex code representing a color, such as #ff5733.
RGB value	An RGB color value, such as rgb(255, 87, 51).
HSL value	An HSL color value, such as hsl(9, 100%, 60%).
currentcolor	The current value of the color property.

📄 Example

In this example, we'll change the accent color of a checkbox to blue.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS accent-color Example</title>
  <style>
    input[type="checkbox"] {
      accent-color: blue;
    }
  </style>
</head>
<body>
  <h1>Checkbox with Custom Accent Color</h1>
  <label>
    <input type="checkbox" checked>
    Check me out!
  </label>
</body>
</html>

🖥️ Browser Compatibility

The accent-color property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The accent-color property is a powerful tool for web developers looking to create a cohesive and visually appealing user experience.

By customizing the color of form controls and other interactive elements, you can ensure that every aspect of your website aligns with your design vision. Experiment with different colors and see how this property can enhance the look and feel of your web projects.