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:

1 Like