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

Question

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?

Answer 1

Tom Select supports CSS customization via optionClass and itemClass and/or rendering. I use rendering like below.

new TomSelect("#select-state",{
    create: false,
    sortField: {
        field: "text",
        direction: "asc"
    },
    //optionClass: 'option',
    //itemClass: 'item',
    render:{
        option: function(data, escape) {
            return '<div class="custom-style-1">' + escape(data.text) + '</div>';
        },
        item: function(data, escape) {
            return '<div class="custom-style-2">' + escape(data.text) + '</div>';
        },
        dropdown:function(){
            return '<div></div>';
        },
    },
});