Tricking out Inputs

Is it possible to style Observable Inputs with CSS/other methods?

Support Notebook

Always learning,
Zach

Yes, kind of. You can get the current class prefix via

Inputs.text().classList[0] // returns e.g. "oi-ec050e"

E.g., this snippet sets the width of the number input in Inputs.range() to the same width as the color input in Inputs.color():

// Source: https://observablehq.com/@mootari/arc-flip#cell-1410
((ns = Inputs.text().classList[0]) => html`<style>
.${ns}-input > input[type="number"],
.${ns}-input > input[type="color"] {max-width: 10ch}
`)()

which looks like this:

Without it these inputs would have looked like this:

2 Likes

What if I wanted to change the font used in the Input labeling or apply other styling to a button to change it’s colors? Is there a way to tell how an Input is constructed and how I could apply style to it (how did you find out about “max-width” as an option)?

Maybe this is of interest? Is Observable Inputs style-able? / Saneef H. Ansari / Observable

@zachbogart You can inspect the element through your browser’s developer tools.

Thanks for your help!