Changing the color of st.checkbox using css accent-color

[dimitris]

In app.py i have the code:

import streamlit as st
st.html(‘style.css’)
st.checkbox(“Hello”, value=True)

In style.css: the code is:

input[type=‘checkbox’] {
accent-color: rgb(255, 255, 128);
}

But the color never change.
Is there any way to change the color using accent-color?

Thanks

[mathcatsand]

There is actually a span element preceding the checkbox which handles the visual display of the checkbox. The easier way to change the color is through Theming, though this would change all checkboxes, buttons, etc.

The HTML element you actually need to modify is

span:has(+input[type='checkbox'])

However, if you want to override it as a one-off, you’ll have to inspect the element and identify the internal classes applied for when it is selected or not so you can apply color correctly. Since it’s not officially supported, those classes may change from version to version, and even the HTML object I’ve identified above may change.

[dimitris]

Thank you very much for the response. it would be very nice if you could also define the class in the component. Thanks again…