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();

Answer 1

I don't think you can create rounded option element without creating a complete copy of the DDL with div elements like in this example. But the closest you can get is something like this.

Give the DDL a class, in this case RoundedDDL

<asp:DropDownList ID="DropDownList1" runat="server" CssClass="RoundedDDL">
    <asp:ListItem Text="" Value=""></asp:ListItem>
    <asp:ListItem Text="" Value="True"></asp:ListItem>
    <asp:ListItem Text="" Value="False"></asp:ListItem>
</asp:DropDownList>

Then with CSS make it round and remove the arrow with appearance: none;. You can style the select elements by value with option[value="True"]

<style>
    .RoundedDDL {
        appearance: none;
        width: 30px;
        height: 30px;
        border-radius: 15px;
        border: 1px solid black;
        background-color: white;
        cursor: pointer;
    }

    select option {
        background-color: white;
    }

    select option[value="True"] {
       background-color: green;
    }

    select option[value="False"] {
        background-color: red;
    }

    .red {
        background-color: red;
    }

    .green {
        background-color: green;
    }
</style>

And then some javascript to add the correct class to the DDL when a specific value has been selected.

<script>
    $('.RoundedDDL').bind('change', function () {
        var $this = $(this);
        $this.removeClass('green');
        $this.removeClass('red');

        if ($this.val() === 'True') {
            $this.addClass('green');
        } else if ($this.val() === 'False') {
            $this.addClass('red');
        }
    });
</script>