How to `display(HTML("<style>.`

[runfish5]

Problem

• There is no example showing how to use ipywidgets.HTML(). If there was, I wasn't able to use it in google colab. It took me about two months get my first widgets being styled with the additional HTML-code display(HTML(... & .add_class("var").

• I'm also interested in one particular example, but I do not know if that is possible with ipywidgets.

This particular case is, how to change the ipywidgets.IntText input font size?

I was able to change font-size of the ipywidgets SelectMultiple and Textarea with this code:

from ipywidgets import HBox, Textarea, SelectMultiple, HTML
display(HTML("<style>.mytext > select,.mytext > textarea   {font-style: italic;color: blue;font-size: 30px;}</style>"))
display(HTML("<style>.font_small > select {font-size: 11px; padding: 0px 0px; background-color: #4CAF50;color: blue;}</style>"))
w2= Textarea(value="Here it is")
w2.add_class("mytext")

w1= SelectMultiple(options='sess')
w1.add_class('font_small')

display(HBox([w1, w2]))

But I could't find the right code for the part: display(HTML("<style>.mytext >.

Suggested Improvement

• I made a small collection of working codes and think it might be useful to other users:
  https://gist.github.com/raven44099/7e0d239a06ca8caf32ec71dbd162d31c#file-ipywidgets-html_colab_examples-ipynb

• An instruction on how to find the correct keyword, like select in display(HTML("<style>.mytext > select for the case of ipywidgets.SelectMultiple would be helpful.

[jasongrout]

It looks like we can add a style attribute for the font size for the IntText, like we have for plain Text:

from ipywidgets import Text
display(Text(style={'font_size': '30px'}))

[runfish5]

Unfortunately this doesn't work in google colab.

For reference my code here:

import ipywidgets as widgets
from ipywidgets import Text, VBox, IntText
display(HTML("<style>.font_small {font-size: 9px; padding: 0px 0px; background-color: #4CAF50;color: red;}</style>"))

my_widget = IntText(value=44,
                  description='Any',
                  layout = {'width':'220px'},
                  style={'font_size': '50px'},
)
my_widget.add_class('font_small')

display(my_widget)

[jasongrout]

Unfortunately this doesn't work in google colab.

To clarify: I was saying that a good fix for this issue is for someone to contribute the code to ipywidgets to enable the following to work:

from ipywidgets import IntText
display(IntText(style={'font_size': '30px'}))

just like this currently works in ipywidgets 8:

from ipywidgets import Text
display(Text(style={'font_size': '30px'}))

We assigned this issue the "good first issue" label to indicate that it would be a great contribution for someone new to the ipywidgets project. Perhaps you would like to contribute it? Or it will be a good idea next time we have a code sprint as well.

[runfish5]

Haha. I see, 👍 . Yes, I agree 💯 with your thoughts. I'm sorry I'm not yet that good at programming. But when I reach that level, certainly!