How do I change the colour of a highlighted item in an ASP:listbox?

<select
    size="1"
    name="lbxRange"
    id="lbxRange"
    tabindex="110"
    title="Click to select the range"
    class="listbox"
    onfocus="this.size=10;"
    onblur="this.size=0;"
    onchange="this.size=1; this.blur();">
    <option selected="selected" value="--None--">--None--</option>
    <option value="My Value 1">My Value 1</option>
    <option value="My Value 2">My Value 2</option>
</select>

.listbox {
    width: 80%;
    min-width: 220px;
    border-radius: 4px;
    background-color: red; /* red for testing */
    color: black;
}

/* color selector hover background */
option:hover {
    background-color: yellow;
  }

/* color for selected background */
option[selected="selected"] {
    background-color: green;
  }

option[selected="selected"]:hover {
  background-color: purple;
}

option:checked:hover {
    box-shadow: 0 0 10px 100px pink inset;
}

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebformListSelectColor._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <main>
        <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>
    </main>

</asp:Content>

public partial class _Default : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        ListBox1.DataSource = new List<Person>
        {
            new Person(1, "Fred"),
            new Person(2, "Paul"),
            new Person(3, "Ringo"),
        };

        ListBox1.DataTextField = nameof(Person.Name);
        ListBox1.DataValueField = nameof(Person.Id);
        ListBox1.DataBind();

        ListBox1.SelectedIndex = 0;
        ListBox1.CssClass = "listbox";
    }
}

public class Person
{
    public Person(int id, string name)
    {
        Id = id;
        Name = name;
    }
    public int Id { get; set; }
    public string  Name { get; set; }
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}


.listbox {
    width: 80%;
    min-width: 220px;
    border-radius: 4px;
    background-color: red; /* red for testing */
    color: black;
}

/* color selector hover background */
option:hover {
    background-color: yellow;
}

/* color for selected background */
option[selected="selected"] {
    background-color: green;
}

    option[selected="selected"]:hover {
        background-color: purple;
    }

option:checked:hover {
    box-shadow: 0 0 10px 100px pink inset;
}


/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .body-content {
        padding: 0;
    }
}