How to Add CSS to DataPager Control in ASP.NET

In this tutorial, we have study how to Apply cool CSS to DataPager Control in ASP.NET.

So, When we add DataPager Control into web form then see look like as follow:

<asp:DataPager ID="DataPager1" runat="server">
            <Fields>
                <asp:NumericPagerField />
            </Fields>
</asp:DataPager>

Also We have used Numeric field.

Now Replace above code with following code.

<div class="pagenavi">
         <asp:DataPager ID="DataPagerList" runat="server" PageSize="3" OnPreRender="DataPagerList_PreRender">
              <Fields>
                     <asp:NextPreviousPagerField ButtonType="Link" ShowLastPageButton="false"
                               FirstPageText="&#171;" ShowNextPageButton="false"   ShowFirstPageButton="true"  ShowPreviousPageButton="False" />
                      <asp:NumericPagerField ButtonType="Link" ButtonCount="5" />
                       <asp:NextPreviousPagerField ButtonType="Link" ShowLastPageButton="True" LastPageText="&#187;" ShowNextPageButton="false" ShowFirstPageButton="false"  ShowPreviousPageButton="False" />
             </Fields>
           </asp:DataPager>
</div>

In above Control  I have used ButtonType attribute to Link, So its display anchor link in web page. also I have used FirstPageText attribute, this will display specified text.

Now you can  use following CSS to apply the design.

.pagenavi a, .pagenavi span
{
    min-width:24px;
    min-height:20px;
    line-height:100%;
    text-decoration:none;
    text-align:center;
    margin:0 3px;
    padding:4px 0 0;
    vertical-align:middle;
    display:inline-block;
    zoom:1;*display:inline;
   -webkit-border-radius:10em;
   -moz-border-radius:10em;
    border-radius:10em
}
.pagenavi a
{
    background:#666;
    color:#fff;
    text-decoration:none
}
.pagenavi a:hover
{
    background-color:#333;
    text-decoration:none;
}
.pagenavi .current
{
    color:#666;
    text-decoration:none
}
.post-nav
{
    margin:0 0 30px;
    padding:15px 0;
    clear:both;
    font-size:14px;
}
.pagenavi
{
    padding:0;
    text-align:right;
    margin:0;
    float:right;
    width:100%;
}

Demo