Wednesday, 15 May 2019

Style bootstrap-select "placeholder" differently

I have successfully managed to apply a different style to my normal select elements if the selected option is the first one (the placeholder) with jQuery like so :

<script type="text/javascript">
        $(document).ready
        (
            function () 
            {
                $('select').each(function (index, value)
                {
                    if($(this).val()==="")
                    { 
                        $(this).css('font-style', 'italic');
                        $(this).css('color', '#636c72');
                        $(this).children().css('font-style', 'normal');   
                    }
                    else
                    {
                        $(this).css('font-style', 'normal');
                        $(this).css('color', 'black');
                        $(this).children().css('font-style', 'normal');    
                    }
                });
            }
        );
    </script>

However, some of my forms are using the bootstrap-select component due to the sheer amount of entries they contain (can be thousands) and the necessity of having a way to narrow down the entries with text searches. Those components produce MUCH more complicated HTML and the above code does not work at all.

I am trying to find a way to apply the same logic as with my normal selects : style the input in italic and with a different color if the option selected is the first one. Here is an example of such select :

<select class="form-control selectpicker" id="medFilter" name="medFilter" th:value="${medFilter}"
                                            onchange="this.form.submit()" data-live-search="true" title="Select Med"> 
                                            <option value="">Search Med</option>
                                            <option th:each="med : ${meds}" th:value="${med.id}" 
                                                th:text="${med.toString()}" th:selected="${med.id == medFilter}">
                                                </option>
                                        </select>

Has anyone ever been able to achieve this?



from Style bootstrap-select "placeholder" differently

No comments:

Post a Comment