Click here to Skip to main content
13,771,440 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


11 bookmarked
Posted 9 Aug 2011
Licenced CPOL

Style ASP.NET's RadioButtonList to be a Tabstrip

, 9 Aug 2011
Rate this:
Please Sign up or sign in to vote.
How to make your RadioButtonList look and work like a normal HTML tab control.

Use the following method to make your RadioButtonList look and work like a normal HTML tab control. This is useful when you're working on .NET 2.0 apps, and aren't allowed to use AJAX.

Put the following CSS into your CSS file:

    font: 12px Verdana, sans-serif;
    color: #000; /* non selected color */

.radiobuttonlist input
    width: 0px;
    height: 0px;
.radiobuttonlist label
    color: #3E3928;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    border: 1px solid #AAAAAA;
    margin: 0px 0px 0px 0px;
    white-space: nowrap;
    clear: left;
    margin-right: 5px;
.radiobuttonlist span.selectedradio label
    background-color: #F7F5E8;
    color: #000000;
    font-weight: bold;
    border-bottom-color: #F3F2E7;

.radiobuttonlist label:hover
    color: #CC3300;
    background: #D1CFC2;


    border: solid 1px #AcA899; 
    padding: 10px; 

Set the CssClass of your RadioButtonList to "radiobuttonlist", set the "RepeatLayout" to "Flow", and enclose it in a DIV, like this:

<div class="radiobuttoncontainer">
    <asp:RadioButtonList ID="optTabs" runat="server" AutoPostBack="true" RepeatDirection="Horizontal"

        RepeatLayout="Flow" CssClass="radiobuttonlist">
        <asp:ListItem runat="server" Text="Locations" Value="LocationInformation_Manage"></asp:ListItem>
        <asp:ListItem Text="Address" Value="Address_Manage"></asp:ListItem>
        <asp:ListItem Text="Contacts" Value="Contacts_Manage"></asp:ListItem>
        <asp:ListItem Text="Comments" Value="CommentsList_Manage"></asp:ListItem>
        <asp:ListItem Text="Conveyances" Value="ConveyanceList_Manage"></asp:ListItem>
        <asp:ListItem Text="Permits" Value="PermitList_Manage"></asp:ListItem>
        <asp:ListItem Text="Invoices" Value="TransactionList_Manage"></asp:ListItem>
        <asp:ListItem Text="Analyze Invoices" Value="Annual_Invoice_Analysis_View"></asp:ListItem>
<div class="radiobuttonbackground">
    <asp:PlaceHolder ID="phEntity"  runat="server"></asp:PlaceHolder>

On Page_Load in the code-behind, add the following line:

optTabs.SelectedItem.Attributes.Add("class", "selectedradio")


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


About the Author

United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 4 Pin
Halil Güneş6-Feb-13 4:03
memberHalil Güneş6-Feb-13 4:03 
GeneralReason for my vote of 5 nice Pin
Member 306511516-Aug-11 21:09
memberMember 306511516-Aug-11 21:09 
GeneralScreenshot would be too fine, will you please? Pin
thatraja10-Aug-11 1:56
protectorthatraja10-Aug-11 1:56 
GeneralRe: that was my thought to. How does it look like? Pin
digimanus10-Aug-11 2:08
memberdigimanus10-Aug-11 2:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.181119.1 | Last Updated 9 Aug 2011
Article Copyright 2011 by Kamilche
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid