How do I use CSS to modify Panel widgets' style like fontsize and color?

https://panel.holoviz.org/reference/widgets/RadioBoxGroup.html#widgets-gallery-radioboxgroup

I want to increase the fontsize. Probably CSS?

import panel as pn

css = """
.bk.bk-input-group label.bk span.bk {
  background-color: lightgray;
  color: red;
  font-size: 250%;
}
"""
pn.extension(raw_css=[css])

pn.widgets.RadioBoxGroup(options=['a', 'b'])

image

the CSS tags are from browser console.

  1. First right click, inspect image
  2. Use the element select tool image
  3. Click on the element you want to edit image
  4. Read from the console what the tags are
  5. use that to construct your CSS:
css = """
.bk.bk-input-group label.bk span.bk {
  background-color: lightgray;
  color: red;
  font-size: 250%;
}
  1. Google CSS style keywords

I think this should be documented somewhere

3 Likes