Customize Inputs

Hi :wave:,

I have a question regarding customizing Inputs. Notebook here:

Thanks in advance!

Here’s a function that you could apply to your input:

function restyle(input) {
    .classed("myInput", true)
    .text(`.myInput input {border: solid red 4px;}`);
  return input;
viewof options = restyle(Inputs.input(…………))
1 Like

Note that you can access an Inputs widget’s input elements via their names, for example:

viewof myRange = {
  const form = Inputs.range([1, 100]); += "border-radius: 10px"; += "accent-color: red";
  return form;


viewof myText = {
  const form = Inputs.textarea({submit: true}); += "border-radius: 10px";
  // the button doesn't have a name
  form.elements[1].style.cssText += "font-weight: bold; width:100%";
  return form;

If you want to modify all Inputs styles globally you can get the scope class / prefix via

// e.g. "oi-3a86ea"
prefix = Inputs.text().classList[0]

Thanks! This works great:

Can I modify this function or create another function so I can simultaneously modify the labels of these inputs (so I don’t need to use html inside each Input)? This would make it much easier to maintain/modify notebooks.

Certainly! See d3-selection | D3 by Observable for how to select within the input’s structure

1 Like

Thanks for this! I tried to use this approach here:

It allows me to customize much of the inputs but I am not sure how I can access some of them, e.g. the Click me button, Toggle button or the Select areas. Is there any comprehensive list of the names of these elements?

The list is here GitHub - observablehq/inputs: Better input elements