CODEWITHSUNDEEP
javascriptcssruby-on-railstom-select
Ogarocious
Ogarocious

Reputation: 129

How to customize the placeholder text using the Tom Select Javascript UI

My goal is to change the font of the placeholder text in for the select fields for the dance styles and event types, both are using the Tom Select JS UI for the select dropdowns.

Through the Tom Select site I was able to find this:

.ts-wrapper .option {
  font-family: Poppins;
}

The above code allowed me to change the font of the options within the select dropdown options.

Does anyone know the proper CSS code to change the placeholder text?

enter image description here

Upvotes: 3

Views: 2103

Answers (1)

Pere
Pere

Reputation: 2033

This must be done in JavaScript when initializing TomSelect:

const tom = new TomSelect("#input-id", {
    placeholder: "YOUR PLACEHOLDER",
    ...

To update the placeholder setting after initialization, call inputState():

const tom = new TomSelect('#input-id');
tom.settings.placeholder = "New placeholder";
tom.inputState();

Upvotes: 1

Related Questions