Telerik Listbox item color

[Supantho]

I am searching for an option to change the color of the selected item in a RadListbox from Blue to Black.. tried options in the css file as well as the .aspx file but the color appears to be blue. The code is attached below:

/* RadListBox Default skin */

 

/*global*/

 

.RadListBox_AnaquaSkin *

{

    margin:1;

    padding:2;     

}

 

.RadListBox_AnaquaSkin .rlbGroup

{

    border: 1px solid #8e8e8e;

    

   background: #FFFFFF;

}

 

.RadListBox_AnaquaSkin .rlbText,

.RadListBox_AnaquaSkin .rlbItem,

.RadListBox_AnaquaSkin .rlbButtonText,

.RadListBox_AnaquaSkin .rlbEmptyMessage

{

    font-size: 11px;

    font-family: Arial, Verdana, MS Sans Sans-Serif;

     

}  

 

.RadListBox_AnaquaSkin .rlbText,

.RadListBox_AnaquaSkin .rlbItem

{

    line-height: 10px;

     

}

 

.RadListBox_AnaquaSkin .rlbGroup .rlbHovered

{

    background: #ffffff;/* text color when hovered over options */

     

     

}

 

.RadListBox_AnaquaSkin .rlbGroup .rlbSelected

{

    color: #FFF;

    background: #0A246A;/* Listbox item selected background color #C8C8C8,  #140B65*/

     

     

}

 

.RadListBox_AnaquaSkin .rlbDisabled .rlbText

{

    color: #AAA;/*Disabled listbox text color*/

}

 

.RadListBox_AnaquaSkin .rlbDisabled .rlbImage

{

    -moz-opacity: 0.5;

}

 

.RadListBox_AnaquaSkin .rlbDropClue

{

    background-image: url('ListBox/rlbDropClue.png');

    background-position: 0 0;

    background-repeat: no-repeat;

    background-color: transparent;

    left: -10px;

    width: 10px;

}

 

.RadListBox_AnaquaSkin .rlbGroup .rlbDropClueAbove

{

    border-top-style: dotted;

    border-top-color: #8e8e8e;

}

 

.RadListBox_AnaquaSkin .rlbGroup .rlbDropClueBelow

{

    border-bottom-style: dotted;

    border-bottom-color: #8e8e8e;

}

 

.RadListBox_AnaquaSkin .rlbGroup .rlbSelected.rlbDropClueAbove,

.RadListBox_AnaquaSkin .rlbGroup .rlbHovered.rlbDropClueAbove,

.RadListBox_AnaquaSkin .rlbGroup .rlbSelected.rlbDropClueBelow,

.RadListBox_AnaquaSkin .rlbGroup .rlbHovered.rlbDropClueBelow

{

    border-color: #FFF;

}

 

/* Buttons normal state vertical layout*/

.RadListBox_AnaquaSkin .rlbButtonText

{

    background: transparent url('ListBox/rlbSprite.png') no-repeat;

}

 

.RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonTL,

.RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonTR,

.RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonBL,

.RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonBR

{

    background-image: url('ListBox/rlbButtonHover.png');

}

 

* html .RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonTL,

* html .RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonTR,

* html .RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonBL,

* html .RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonBR

{

    background-image: url('ListBox/rlbButtonHoverIE6.png');

}

 

.RadListBox_AnaquaSkin .rlbButton .rlbButtonTL,

.RadListBox_AnaquaSkin .rlbButton .rlbButtonTR,

.RadListBox_AnaquaSkin .rlbButton .rlbButtonBL,

.RadListBox_AnaquaSkin .rlbButton .rlbButtonBR,

.RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonTL,

.RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonTR,

.RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonBL,

.RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonBR

{

    background-image: url('ListBox/rlbButtonNormal.png');

}

 

* html .RadListBox_AnaquaSkin .rlbButton .rlbButtonTL,

* html .RadListBox_AnaquaSkin .rlbButton .rlbButtonTR,

* html .RadListBox_AnaquaSkin .rlbButton .rlbButtonBL,

* html .RadListBox_AnaquaSkin .rlbButton .rlbButtonBR,

* html .RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonTL,

* html .RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonTR,

* html .RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonBL,

* html .RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonBR

{

    background-image: url('ListBox/rlbButtonNormalIE6.png');

}

 

.RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonText

{

    color: #FFF;

}

 

.RadListBox_AnaquaSkin .rlbDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonText

{

    color: #888;

}

 

.RadListBox_AnaquaSkin .rlbMoveUp .rlbButtonText { background-position: 0 0; }

.RadListBox_AnaquaSkin .rlbMoveUp:hover .rlbButtonText { background-position: -400px 0; }

.RadListBox_AnaquaSkin .rlbMoveUpDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbMoveUpDisabled:hover .rlbButtonText { background-position: -200px 0; }

 

.RadListBox_AnaquaSkin .rlbMoveDown .rlbButtonText { background-position: 0 -25px; }

.RadListBox_AnaquaSkin .rlbMoveDown:hover .rlbButtonText { background-position: -400px -25px; }

.RadListBox_AnaquaSkin .rlbMoveDownDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbMoveDownDisabled:hover .rlbButtonText { background-position: -200px -25px; }

 

.RadListBox_AnaquaSkin .rlbDelete .rlbButtonText { background-position: 0 -50px; }

.RadListBox_AnaquaSkin .rlbDelete:hover .rlbButtonText { background-position: -400px -50px; }

.RadListBox_AnaquaSkin .rlbDeleteDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbDeleteDisabled:hover .rlbButtonText { background-position: -200px -50px; }

 

 

.RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferTo .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferFrom .rlbButtonText { background-position: 0 -100px; }

.RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferTo .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferFrom .rlbButtonText { background-position: 0 -75px; }

.RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferFrom:hover .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferTo:hover .rlbButtonText { background-position: -400px -100px; }

.RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferTo:hover .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferFrom:hover .rlbButtonText { background-position: -400px -75px; }

 

.RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferToDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferFromDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferFromDisabled:hover .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferToDisabled:hover .rlbButtonText { background-position: -200px -100px; }

 

.RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferToDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferFromDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferToDisabled:hover .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferFromDisabled:hover .rlbButtonText { background-position: -200px -75px; }

 

 

.RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferAllTo .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferAllFrom .rlbButtonText { background-position: 0 -150px; }

.RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferAllTo .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferAllFrom .rlbButtonText { background-position: 0 -125px; }

.RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferAllFrom:hover .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferAllTo:hover .rlbButtonText { background-position: -400px -150px; }

.RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferAllTo:hover .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferAllFrom:hover .rlbButtonText { background-position: -400px -125px; }

 

.RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferAllToDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferAllFromDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferAllFromDisabled:hover .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferAllToDisabled:hover .rlbButtonText { background-position: -200px -150px; }

 

.RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferAllToDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferAllFromDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferAllToDisabled:hover .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferAllFromDisabled:hover .rlbButtonText { background-position: -200px -125px; }

 

 

.RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferTo .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferFrom .rlbButtonText { background-position: 0 -200px; }

.RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferTo .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferFrom .rlbButtonText { background-position: 0 -175px; }

.RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferFrom:hover .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferTo:hover .rlbButtonText { background-position: -400px -200px; }

.RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferTo:hover .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferFrom:hover .rlbButtonText { background-position: -400px -175px; }

 

.RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferToDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferFromDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferFromDisabled:hover .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferToDisabled:hover .rlbButtonText { background-position: -200px -200px; }

 

.RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferToDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferFromDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferToDisabled:hover .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferFromDisabled:hover .rlbButtonText { background-position: -200px -175px; }

 

 

.RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferAllTo .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferAllFrom .rlbButtonText { background-position: 0 -250px; }

.RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferAllTo .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferAllFrom .rlbButtonText { background-position: 0 -225px; }

.RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferAllFrom:hover .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferAllTo:hover .rlbButtonText { background-position: -400px -250px; }

.RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferAllTo:hover .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferAllFrom:hover .rlbButtonText { background-position: -400px -225px; }

 

.RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferAllToDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferAllFromDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferAllFromDisabled:hover .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferAllToDisabled:hover .rlbButtonText { background-position: -200px -250px; }

 

.RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferAllToDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferAllFromDisabled .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferAllToDisabled:hover .rlbButtonText,

.RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferAllFromDisabled:hover .rlbButtonText { background-position: -200px -225px; }


ASP code below contains a simple Listbox and a special RadListBox:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ListBoxTest.aspx.cs" Inherits="Anaqua.Web.UI.ListBoxTest"
    MasterPageFile="~/MasterPages/ApplicationPage.Master" %>
<%@ MasterType VirtualPath="~/MasterPages/ApplicationPage.Master" %>

<asp:Content ID="ListBoxTestContent" ContentPlaceHolderID="PageContentPlaceHolder" runat="server">

    <asp:ListBox ID="testlistbox1"  width="250" Height="80px" runat="server">
        <asp:ListItem selected="true" Text="1" Value="0"  />
        <asp:ListItem selected="False" Text="2" Value="1" />
        <asp:ListItem Text="3" Value="2" />
        <asp:ListItem Text="4" Value="3" />
        <asp:ListItem Text="5" Value="4" />
        <asp:ListItem Text="6" Value="5" />
        <asp:ListItem Text="7" Value="6" />
        <asp:ListItem Text="8" Value="7" />
        <asp:ListItem Text="9" Value="8" />
        </asp:ListBox>

   <Anaqua:AnaquaRadListBox
   ID="TestRadListBox" Width="250px" Height="80px" color="Black"
             AllowTransfer="false"
             AllowReorder="false"
             AllowTransferDuplicates="false"
             AllowTransferOnDoubleClick="false"
             EnableDragAndDrop="false"
             SelectionMode="Single"
             runat="server">

        <Items>
            <telerik:RadListBoxItem Text="1" Value="0" />
            <telerik:RadListBoxItem Text="2" Value="1" />
            <telerik:RadListBoxItem Text="3" Value="2" />
            <telerik:RadListBoxItem Text="4" Value="3" />
            <telerik:RadListBoxItem Text="5" Value="4" />
            <telerik:RadListBoxItem Text="6" Value="5" />
            <telerik:RadListBoxItem Text="7" Value="6" />
            <telerik:RadListBoxItem Text="8" Value="7" />
            <telerik:RadListBoxItem Text="9" Value="8" />
        </Items>
    </Anaqua:AnaquaRadListBox>

</asp:Content>

[Kamen Bundev]

Hello Supantho,

Your skin seems okay. How do you set the skin on this RadListBox? Can you open a support ticket and send a sample project or a live URL, so that we can take a look? Thank you in advance.

Greetings,
Kamen Bundev
the Telerik team