Originally posted here!
To change the color or the accent color of the interactive HTML elements on a webpage using CSS, you can use the accent-color CSS property on the html selector in the CSS styles and set its value to the color of your choice.
TL;DR
<!-- A simple webpage with a radio `input` and a checkbox `input` HTML element -->
<html>
<style>
html {
/* setting all the HTML elements accent color to `red` */
accent-color: red;
}
</style>
<body>
<input type="radio" />
<input type="checkbox" />
</body>
</html>
For example, let's say we have a radio input and a checkbox input HTML element on the webpage like this,
<!-- A simple webpage with a radio `input` and a checkbox `input` HTML element -->
<html>
<body>
<input type="radio" />
<input type="checkbox" />
</body>
</html>
The webpage now looks like this,
If you see the above screenshot, the radio and the checkbox HTML elements have the default color or the accent color (blue color in the case of Safari browser) applied to them.
We aim to change the color or the accent color of both the interactive HTML elements to red color.
To do that first, let's select the html selector in the CSS styles like this,
<!-- A simple webpage with a radio `input` and a checkbox `input` HTML element -->
<html>
<style>
html {
/* CSS style here */
}
</style>
<body>
<input type="radio" />
<input type="checkbox" />
</body>
</html>
Now let's apply the accent color to all the HTML elements by using the accent-color CSS property inside the html selector and setting the value as red.
It can be done like this,
<!-- A simple webpage with a radio `input` and a checkbox `input` HTML element -->
<html>
<style>
html {
/* setting all the HTML elements accent color to `red` */
accent-color: red;
}
</style>
<body>
<input type="radio" />
<input type="checkbox" />
</body>
</html>
Now both the input HTML element's accent colors are changed to red color.
A visual representation of the webpage HTML elements is shown below,
We have successfully changed the accent color of the interactive HTML element using CSS. Yay 🥳!
See the above code live in codesandbox.
That's all 😃.
Top comments (0)