Is it possible to style Observable Inputs with CSS/other methods?
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!