Hi Mudassar,
After a lot of effort, I have acheived the rounded background for listview paging. Below is my css. I think it may help someone.
* Rounded CSS paging for Listview*/
.circle, #ContentPlaceHolder1_LviewBasket_DataPager1 span, #ContentPlaceHolder1_LviewBasket_DataPager1 a {
width: 20px;
height: 20px;
background-color: #fff;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
border: 1px solid #ccc;
}
.circle:active {
border: 1px solid red;
}
#ContentPlaceHolder1_LviewBasket_DataPager1 span, #ContentPlaceHolder1_LviewBasket_DataPager1 a {
padding: 7px 12px;
height: 20px;
border-radius: 70px;
text-decoration:none;
color:#000;
}
#ContentPlaceHolder1_LviewBasket_DataPager1 span {
background-color:red;
color:#fff
}
And the HTML
asp:DataPager ID="DataPager1" runat="server" PagedControlID="LviewBasket" PageSize="1">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" PreviousPageText="<<" ButtonCssClass="circle"
ShowFirstPageButton="true" FirstPageText="|<" ShowPreviousPageButton="true"
ShowNextPageButton="false" />
<asp:NumericPagerField ButtonType="Link" />
<asp:NextPreviousPagerField ButtonType="Button" ShowNextPageButton="true" NextPageText=">>" ShowLastPageButton="true" LastPageText=">|"
ButtonCssClass="circle" ShowPreviousPageButton = "false" />
</Fields>
</asp:DataPager>
Thanks for your suggestions.