2b:null 2c:["$","title",null,{"children":"Customize Inputs | Erdi | Observable"}] 31:[] 2f:{"id":"bf3f6be984f9daf2","slug":null,"title":"Customize Inputs","thumbnail":"b47bdf98fa6e2b2ae70904fcd1b6a2fd02beb81fa189deb29450a15975ae3f18","access_level":"public","create_time":"$D2023-08-25T09:00:18.458Z","update_time":"$D2023-09-02T18:55:24.066Z","view_time":null,"first_public_time":"$D2023-08-25T09:00:18.458Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4abd0c43fdd6e066","login":"erdi","name":"Erdi","avatar_url":"https://avatars-next.observableusercontent.com/eb84eb9409ef8718acf5997b062fe1f9b4b7fab2b05bad353157d1f9042ce7f4","tier":"starter_2024"},"version":461,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"999d2bf63fdbb6fd","login":"erdi","name":"Erdi","avatar_url":"https://avatars-next.observableusercontent.com/eb84eb9409ef8718acf5997b062fe1f9b4b7fab2b05bad353157d1f9042ce7f4","tier":null}],"members":[{"type":"individual","id":"999d2bf63fdbb6fd","login":"erdi","name":"Erdi","avatar_url":"https://avatars-next.observableusercontent.com/eb84eb9409ef8718acf5997b062fe1f9b4b7fab2b05bad353157d1f9042ce7f4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Customize Inputs","cells":[{"id":0,"value":"# Customize Inputs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"I have the following inputs:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"viewof options = Inputs.form([\n Inputs.radio(['light', 'dark'], {label: html`Select theme:`, value: 'light'}),\n Inputs.toggle({label: \"Include logo?\"}),\n Inputs.range([25, 100], {value: 75, label: html`Logo size:`, step: 5}),\n Inputs.range([0, 100], {label: tex`\\beta(\\textbf{r})`, value: 1}),\n Inputs.text({label: html`Text:`, value: \"Text to plot...\"})\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"Here I am able to customize the label of each input (changing background color, etc). I am guessing it's possible to also customize the actual inputs. E.g. customize the rectangle where `Text to plot...` shows: remove border, round corners, and have some light background color. What would be the best practice in achieving this?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"# Solutions/Ideas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"## One solution\n\nFrom [here](https://talk.observablehq.com/t/customize-inputs/8226/2)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"function restyle(input) {\n d3.select(input)\n .classed(\"MyInput\", true)\n .append(\"style\")\n .text(`.MyInput input {border: 0px; background-color: #ebebeb; border-radius: 15px; padding: 5px; accent-color: black; border-bottom: 1px solid; border-style: none; filter: blur(0px);}`);\n return input;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"viewof opt = Inputs.form([\n restyle(Inputs.radio(['light', 'dark'], {label: html`Select theme:`, value: 'light'})),\n restyle(Inputs.toggle({label: \"Include logo?\"})),\n restyle(Inputs.range([25, 100], {value: 75, label: html`Logo size:`, step: 5})),\n restyle(Inputs.range([0, 100], {label: tex`\\beta(\\textbf{r})`, value: 1})),\n restyle(Inputs.text({label: \"Text\", value: \"Text to plot...\"}))\n ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"## Access an Inputs widget’s input elements\n\nFrom [here](https://talk.observablehq.com/t/customize-inputs/8226/3)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"viewof myRange = {\n const form = Inputs.range([0, 100], {label: \"Range:\"});\n form.number.style.cssText += \"border-radius: 5px\";\n form.range.style.cssText += \"accent-color: red\";\n form.elements[0].style.cssText += \"background-color: lightgray\"; // index for `number` element\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"viewof myText = {\n const form = Inputs.textarea({submit: true});\n form.text.style.cssText += \"border-radius: 0px\";\n // the button doesn't have a name\n form.elements[1].style.cssText += \"font-weight: bold;\";\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"Class/prefix to modify all Inputs:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"prefix = Inputs.text().classList[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"