# Tricking out Inputs

**URL:** <https://talk.observablehq.com/t/tricking-out-inputs/6734>\
**Category:** Help\
**Created:** [June 23, 2022, 3:28am UTC](https://talk.observablehq.com/t/tricking-out-inputs/6734 "2022-06-23T03:28:49Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![zachbogart](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/zachbogart/32/8597_2.png) [@zachbogart](https://talk.observablehq.com/u/zachbogart)\
**Post date:** [June 23, 2022, 3:28am UTC](https://talk.observablehq.com/t/tricking-out-inputs/6734/1 "2022-06-23T03:28:49Z")

</div>

Is it possible to style [Observable Inputs](https://observablehq.com/@observablehq/inputs) with CSS/other methods?

[Support Notebook](https://observablehq.com/d/968ad31a62c5d459)

Always learning,  
Zach

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [June 23, 2022, 8:52am UTC](https://talk.observablehq.com/t/tricking-out-inputs/6734/2 "2022-06-23T08:52:39Z")

</div>

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

```javascript
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()`:

```javascript
// 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:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/5/51d5a3a9aad9ebbb3cbff1f400a807ddd0efdb2b.png)

Without it these inputs would have looked like this:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/d/dc33c24ae27f0dd8d92ce347bae9f3f910071b2d.png)

---

<div class="post-metadata">

**Author:** ![zachbogart](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/zachbogart/32/8597_2.png) [@zachbogart](https://talk.observablehq.com/u/zachbogart)\
**Post date:** [November 21, 2022, 8:10pm UTC](https://talk.observablehq.com/t/tricking-out-inputs/6734/3 "2022-11-21T20:10:19Z")

</div>

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)?

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [November 22, 2022, 1:19am UTC](https://talk.observablehq.com/t/tricking-out-inputs/6734/4 "2022-11-22T01:19:42Z")

</div>

Maybe this is of interest? [Is Observable Inputs style-able? / Saneef H. Ansari / Observable](https://observablehq.com/@saneef/is-observable-inputs-style-able)

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [November 22, 2022, 6:41pm UTC](https://talk.observablehq.com/t/tricking-out-inputs/6734/5 "2022-11-22T18:41:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zachbogart](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/zachbogart/32/8597_2.png) [@zachbogart](https://talk.observablehq.com/u/zachbogart)\
**Post date:** [November 22, 2022, 8:35pm UTC](https://talk.observablehq.com/t/tricking-out-inputs/6734/6 "2022-11-22T20:35:57Z")

</div>

Thanks for your help!