Click here to Skip to main content
15,868,164 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
When you scroll through items in an <asp:listbox> the items change colour as the mouse pointer hovers over each item.

The same applies to any listbox more generally in HTML.

Scrolling down the list of items in the <asp:listbox> changes the colour of each item under the mouse hover until the mouse moves down/up to the next item.

I've tried changing the backcolor setting for the listbox using CSS but this doesn't work, it just changes the colour of every item in the listbox.

It seems that the highlighted item colour may be determined by the browser default rather than any CSS for the web page.

Does anyone have a solution for changing the color of just the highlighted item and not the other items?

What I have tried:

I've tried using CSS with a style sheet for:

.listbox {
backcolor: black;
color: white
}


I've also added an option to the CSS:

.listbox option:hover {
backcolor: black;
color: white
}


Here's the listbox inspection details


select size="1" name="lbxRange" onchange="javascript:setTimeout('__doPostBack(\'lbxRange\',\'\')', 0)" id="lbxRange" tabindex="110" title="Click to select the range" class="listbox" style="width: 80%; min-width: 220px; height: 30px">
	<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 {
    border-radius: 4px;
    background-color: white;
    color: black /*outline: none; -webkit-appearance: none;*/;
}

.listbox {
    border-radius: 4px;
    background-color: white;
    color: black /*outline: none; -webkit-appearance: none;*/;
}
Posted
Updated 28-May-23 2:46am
v4
Comments
Graeme_Grant 27-May-23 6:18am    
Remember, we can't see your screen from here, only the code that you post in your question. The css posted is meaningless to us.

Did you use the browser web tools and inspect the element to check the class name that you are targeting?
Member 11659261 27-May-23 7:30am    
Apologies, I've updated the question with the inspection details
Graeme_Grant 27-May-23 7:44am    
see the solution

1 solution

Here you go:
HTML
<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>

and the css:
CSS
.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;
  }

Notice that I use a css selector for the selected item. Here is more on scc selectors: CSS Selectors Reference[^]

UPDATE: The answer is staring at you...

To change Hover color of selected color, combine the css selector with the :hover state:
CSS
option[selected="selected"]:hover {
  background-color: purple;
}


UPDATE #2 It turns out there is a small trick to the hover on the checked option:
CSS
option:checked:hover {
    box-shadow: 0 0 10px 100px pink inset;
}

You can see the final solution working here: Select Option Highlighting on Hover - CodePen.io[^]

UPDATE #3 This is an Asp.Net WebForms project.

Here is a working example for .Net Framework 4.7...

1. Default.aspx file
ASP.NET
<%@ 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>

2. Default.aspx.cs file
C#
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; }
}

3. Site.css file
CSS
/* 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;
    }
}

Create a new Asp.Net > WebForms project and use the above code. This will show a Listbox, not a dropdown, and will highlight as per your requirement. No CSS was modified from my previous answers or the CodePen link above.

If you get different results, then you need to check that you followed the instructions to the letter.
 
Share this answer
 
v7
Comments
Member 11659261 27-May-23 9:26am    
Unfortunately this changes the colour of all the items in the listbox.

I only want to change the colour of the item highlighted in the listbox when the mouse moves over it.
Graeme_Grant 27-May-23 9:41am    
solution updated.
Member 11659261 27-May-23 9:48am    
Ah, I wish it was staring at me.

This doesn't do it, the colour of the highlighted item (as the mouse moves up and down the list contents) remains stubbornly in the blue of Google Chrome and doesn't change.
Graeme_Grant 27-May-23 10:57am    
It was, but how the color set was the trick. See the #2 update.
Member 11659261 27-May-23 16:22pm    
No, sadly that doesn't work either.

Adding option:checked:hover with the box-shadow etc doesn't do anything to the items in the listbox when they are highlighted because the mouse is over them. Google Chrome Blue still rules for each highlighted option on the list.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900