Setting background color of a box in ipywidgets

Question

While creating a layout with ipywidgets I would like to have a HBox with a border and filled with a selected colour. The former is easy to set while the latter is a bit troublesome. I couldn't find a control option for the background fill in the doc. Is there any workaround?

from ipywidgets.widgets import Label, Layout, HBox

label1 = Label('Text1')
label2 = Label('Text2')
box1 = HBox([label1, label2], layout=Layout(border='solid 2px')) # background_color='red'?
display(box1)

score 5 · Answer 1 · answered Jul 03 '20 at 10:18

You can do it using css:

%%html
<style>
.lbl_bg{
    width:auto;
    background-color:yellow;
}
.box_style{
    width:40%;
    border : 2px solid red;
    height: auto;
    background-color:black;
}
</style>

lbl  = widgets.Label(value=  'Test' )
# lbl  = widgets.HTMLMath(value=  'Test' ) # Alternate way using HTMLMath
lbl.add_class('lbl_bg')
hBox = widgets.HBox([lbl],layout=Layout(justify_content= 'flex-end'))
hBox.add_class("box_style")

Output :

It css the only method available? – mins Nov 05 '20 at 22:42 — mins, Nov 05 '20 at 22:42

Setting background color of a box in ipywidgets

1 Answers1