CODEWITHSUNDEEP
asp.netcsslistboxstyling
jamis0n
jamis0n

Reputation: 3810

ASP.NET ListBox Styling - Remove Borders and add Shading

So I'm having a heck of a time doing something that I think should be so simple.

I have an <asp:ListBox /> element that I want to style, as I think the default looks horrendous, especially the border.

But very few attributes seem to take effect in CSS, most notably the border cannot be removed.

The caveat is that I need it to work in IE8 and IE7, not just other more modern browsers.

This example site has beautiful listbox elements, but I can't get anywhere close to them.

Any thoughts?

Heres the HTML:

<asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple" AutoPostBack="true"
    onselectedindexchanged="ListBox1_SelectedIndexChanged" CssClass="myListBox" >
    <asp:ListItem>ITEM 1</asp:ListItem>  
    <asp:ListItem>ITEM 2</asp:ListItem>  
    <asp:ListItem>ITEM 3</asp:ListItem>  
    <asp:ListItem>ITEM 4</asp:ListItem>  
</asp:ListBox>

And the CSS:

.myListBox
{
    border-style:none;
    border-width:0px;
    border: none;
    font-size:12pt;
    font-family:Verdana;
}

Upvotes: 2

Views: 19917

Answers (2)

MikeSmithDev
MikeSmithDev

Reputation: 15797

You have a typo in your CSS class

CssClass="myListbox"

should be 

CssClass="myListBox"

Then you can apply styles on the actual options, i.e.

.myListBox option {
    background-color: #FFFF00;
    color: #FF0000;
}

Though this will not work the same in all browsers. So you'll need to tweak for your own needs, or take a totally different approach like a 3rd party plug-in (look at jquery ui options) or building your own like Peri stated.

One option could be jQuery UI Multiselect, which you should can style with Themeroller.

Although you may just want to play around with customizing your own / different approach to suit your needs.

Upvotes: 1

Piotr Perak
Piotr Perak

Reputation: 11088

The exmaple site is not using listbox, they are just using html's unordered lists. You probably can't achieve what they did with ASP.NET ListBox control. You would have to create your own control and make it render how you want.

Upvotes: 0

Related Questions