Custom CSS Picker

[Hystarea]

I have a read-only form that gets printed. My users are requesting the text in the picker option be bold and larger. I am struggling with the custom CSS to accomplish this. Has anyone else had to do something like this?

[mikesealey]

Hey @Hystarea

You won't be able to use the Custom-CSS option in the styles menu, as this targets the entire parent element.

What you can do is use an embed component

Which will allow you to use <style> tags to signify that you're writing CSS, and then you should find the element(s) you wish to target, and write rules for them.

<style>
label {
  border: 2px solid red;
}

.spectrum-Picker-label {
  font-size: 30px;
}
</style>

This isn't necessarily a straightforward operation, and it will require good use of your browser's developer console to find the class-names of the elements you hope to target, but this should get you started.

[Hystarea]

Thanks a ton! I will look into this.