How to use colored circles in ASP Dropdownlist ListItems without jQuery

Question

Goal: I would like to have a Dropdown list that shows the color green if someones if Availability is True, and red is someones Availability is False.

NOTE: I need to do it without jQuery (I was just told we are not allowed to use jquery in our project).

Problem/Background: The only way I could get anything to show was with CSS and placing it on the Dropdown list itself, as seen in the first row of this image for Prof Smith. You'll see the next row with Prof. Jones is displaying the actual boolean value from the database in the dropdown, although I want a colored circle.

I'd like it to be within the dropdown box itself. It should also (eventually) be able to update the value in the DB if they make a change.

How can I get these circles to show inside the dropdown box?

What I want it the dropdown to look like:

What it actually looks like:

What I've done:

• Tried CSS on the DropdownList as well as the ListItem, and inside of the listitem.

• I have also tried SVG but that didn't insert into the ListItem at all

• I've tried adding CSS through the C# code but couldn't get it to work that way

CSS:

.dot {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    display: inline-block;
}

.greendot {
    background-color: #89C742;
}

.reddot {
    background-color: #fe0505;
}

aspx/html:

<asp:DropdownList runat="server" id="ddl1" class="dot greendot">
    <asp:ListItem ID="LT1"></asp:ListItem>
    <asp:ListItem ID="RT1"></asp:ListItem>              
</asp:DropdownList>

<asp:DropdownList runat="server" id="ddl2">
    <asp:ListItem ID="LT2"></asp:ListItem>
</asp:DropdownList>

C#:

LT2.Text = professorStatsList[1].Available.ToString();