How to change placeholder text color of a Listbox Server control?

Question

I've searched SO on this but all solutions were based on html controls. I have a server control on my page with the following attached on the document ready call:

$(document).ready(function () {
    $("#ListBoxUser").select({
        placeholder: "Select User",
        allowClear: true
    })
});

And this is the actual control:

<asp:ListBox ClientIDMode="Static" ID="ListBoxUser" runat="server"></asp:ListBox>

By default the placeholder text is grey and I need to change the default color. I've tried adding style classes to the JQuery as well as adding styling directly via the ID of the controller and nothing is working. Also have tried every SO solution posted to HTML input tags without resolve.

Is this even possible for a server based control?

Answer 1

Ok, so say we have this listbox:

        <asp:ListBox ID="ListBox1" runat="server" 
            BackColor="LightBlue" ClientIDMode="Static"
            Height="114px" Width="106px">
                <asp:ListItem>One</asp:ListItem>
                <asp:ListItem>Two</asp:ListItem>
                <asp:ListItem>three</asp:ListItem>
        </asp:ListBox>

Now, EVEN with the above background = blue?

Then we see this:

however, we are free to "over ride" or set the background color by adding a style with jQuery.

Say this:

    <script>
        $(window).on('load', function () {
            console.log('load event')
            $('#ListBox1').css("background-color","red")
            }
        )

    </script>

So, we select the list box, and now set the background to be red.

So, we now get/see this:

So, since you already are selecting the listbox, then just add above to that code. eg this:

$(document).ready(function () {

    var mylistb = $("#listBoxUser")

    mylistb.select({
        placeholder: "Select User",
        allowClear: true
    })
    
    mylistb.css("background-color","lightblue")


});

Also, note the "newer" syntax of jQuery for the page load event. Your syntax is "older", and you may well (should) use the above format:

eg:

 $(window).on('load', function () {

Edit: User wants to change text color.

Ok, so then this:

        $(window).on('load', function () {
            console.log('load event')
            $('#ListBox1').css("background-color","red")
            $('#ListBox1').css("color","white")
            }
        )

and we see/get this: