Changing description color in ipywidgets Text widget not working

Question

I'm trying to change the description color of an ipywidgets Text widget in Datalore. I've set the description_color property in the style dictionary to "white" with the aim of having white text, but it doesn't seem to work as expected.

Here's the relevant part of my code:

    import ipywidgets as widgets

    `    text_input = widgets.Text(
        value="",
        description="OCSF field:",
        style={"description_width": "initial", "description_color": "white"},
        layout=widgets.Layout(width='70%'),
    )

    text_input`

I tried this in Datalore (which is where I need it to work) but it doesn't work in jupyter notebook as well.

Is there supposed to be another method to set the color of the text?

Answer 1

For Jupyter running current tech (JupyterLab 3.4+ or 4 or Jupyter Notebook 7+) and IPywidgets 8+

TL;DR

import ipywidgets as widgets
display(widgets.HTML("""
<style>
.my-label-style label {
    color: purple !important;
    font-weight: bold !important;
}
</style>
"""))
text_input = widgets.Text(
        value="",
        description="OCSF field:",
        style={"description_width": "initial"},
        layout=widgets.Layout(width='70%'),  _dom_classes=["my-label-style"]
    )

text_input

THE DETAILS

You can run the following based on the documentation to get the list of the style attributes for a text_input widget you created with your code block:

text_input.style.keys

At present that gives:

['_model_module',
 '_model_module_version',
 '_model_name',
 '_view_count',
 '_view_module',
 '_view_module_version',
 '_view_name',
 'background',
 'description_width',
 'font_size',
 'text_color']

If you try text_color, like so:

import ipywidgets as widgets
text_input = widgets.Text(
        value="",
        description="OCSF field:",
        style={"description_width": "initial", "text_color": "red"},
        layout=widgets.Layout(width='70%'),
    )

text_input

You'll see that doesn't give you want you want.
You'll see it colors the text you are entering and not the description..
So we've exhausted the present style attributes available. Not to worry though, read on...

Adjusting the description text styling

You can customize things by looking at what they are referenced as using developer tools and using CSS as spelled out here. A number of other possibilities/variations exist and are touched on in that thread.

Specific example: Taking your code block and adapting it to make the description text purple and bold

Something like your specific example based on here and mostly here:

import ipywidgets as widgets
display(widgets.HTML("""
<style>
.my-label-style label {
    color: purple !important;
    font-weight: bold !important;
}
</style>
"""))
text_input = widgets.Text(
        value="",
        description="OCSF field:",
        style={"description_width": "initial"},
        layout=widgets.Layout(width='70%'),  _dom_classes=["my-label-style"]
    )

text_input

Result:

Alternative combining widgets?

You could probably remove the description and add in HTML next to the Text input area suing an HBox, something along the lines of what is shown here; however, what I outlined above is definitely more directly addressing the OP's question.