Customize Inputs

Community Help
1

Hi :wave:,

I have a question regarding customizing Inputs. Notebook here:

Thanks in advance!
Erdi

2

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

function restyle(input) {
  d3.select(input)
    .classed("myInput", true)
    .append("style")
    .text(`.myInput input {border: solid red 4px;}`);
  return input;
}

viewof options = restyle(Inputs.input(…………))
1 Like
3

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

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

image
image1972Ă—344 37.6 KB

or

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

image
image1970Ă—448 45.3 KB

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]
3 Likes
4

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.

5

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

1 Like
6

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?

7

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