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?

is this a user control, or a server control? (a server control is a compiled .dll). Why not put the style settings in the markup for the control in the ascx page markup? — Albert D. Kallal, Apr 18 '23 at 16:45
OK, thanks-- that still suggests that the markup for list box should be able to have a style element. However your above jQuery select should also be able to set a style element. You might force the issue by clearing the style and then adding a style in your posted jquery — Albert D. Kallal, Apr 18 '23 at 18:18
I agree but I think the issue (in part anyway) is the placeholder object doesn't appear to acknowledge any of the available attributes that I have or could apply to the list box control. — Mark, Apr 18 '23 at 18:49
List boxuser looks to be a valid selection, is it not? Hit f12 and use elements to see what I'd the list box is being given — Albert D. Kallal, Apr 18 '23 at 18:54
The ID for the element is being shown as ListBoxUser. Which is the same ID I've been trying to manipulate to assign the placeholder color — Mark, Apr 18 '23 at 19:53
Ok, then see my post below. You should be able to set the css style with jQuery as I did below. — Albert D. Kallal, Apr 18 '23 at 20:13
That works to set styling for background elements and etc. but it doesn't affect the actual text color of the placeholder. Which is the issue. IDK, should I have explicitly stated placeholder "text" color? E.g. "Select User" is always the default grey which is what I have to change if possible — Mark, Apr 18 '23 at 20:22
Ok, then use color - see my edit below. To set text color, you use css "color" — Albert D. Kallal, Apr 18 '23 at 20:52
A server control is ultimately rendered as HTML. Right-click the control on the website and select "Inspect". The browser's developer tools will show the HTML that makes up the control. — Heretic Monkey, Apr 18 '23 at 21:18
Does this answer your question? [How to change the look and feel of ASP.NET server controls?](https://stackoverflow.com/questions/5602669/how-to-change-the-look-and-feel-of-asp-net-server-controls) — Heretic Monkey, Apr 18 '23 at 21:20

Albert D. Kallal · Answer 1 · 2023-04-18T20:52:19.183

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:

Or, you could just assign a CSS class to the list box and add CSS to a stylesheet so that it's maintainable and doesn't require new script just to change a color... — Heretic Monkey, Apr 18 '23 at 21:19
I much agree. And using a script to change that css? Well, NOT that great of a example on my part. (only consolation here was the user is already selecting the element in code). However, doing with a style sheet? yes, hands down a better approach. (thus I up-voted your comment) — Albert D. Kallal, Apr 18 '23 at 21:25
Thanks guys. I got it to work. The answer wasn't as straight-forward b/c the ASPNET controller was being used as a server control but also assigned and implemented as a JQuery plugin (select2) which muddied the water a bit for me. Once I identified the plugin and saw it was using stylesheets via CDN. I located and identified the underlying custom selectors via the CDN stylesheets and overrode them using !important. — Mark, Apr 18 '23 at 21:55

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

1 Answers1

Edit: User wants to change text color.