css pagination for GridView

my css :

/* for greed view */
.pagination {
            font-size: 80%;
        }

.pagination a {
    text-decoration: none;
    color: #15B;
}

.pagination a, .pagination span {
    display: block;
    float: left;
    padding: 0.3em 0.5em;
    margin-right: 5px;
    margin-bottom: 5px;
}

.pagination .current {
    background: #26B;
    color: #fff;
    border: solid 1px #AAE;
}

.pagination .current.prev, .pagination .current.next{
    color:#999;
    border-color:#999;
    background:#fff;
}

Grid View :

<asp:Panel ID="Panel2" style="width:1208px; border-style: outset; border-width: 4px; " 
                    runat="server" ScrollBars="Auto">
    <asp:GridView ID="GridView2" runat="server" 
        DataSourceID="SqlDataSource1" Width="100%" 
        ondatabound="GridView2_DataBound" CellPadding="4" ForeColor="#333333" onrowdatabound="GridView2_RowDataBound" 
        HorizontalAlign="Center" AllowPaging="True" 开发者_运维技巧 PageSize="15" 
        onrowcreated="GridView2_RowCreated">
        <PagerSettings FirstPageText="&#1055;&#1077;&#1088;&#1074;&#1072;&#1103;" 
            LastPageText="&#1055;&#1086;&#1089;&#1083;&#1077;&#1076;&#1085;&#1103;&#1103;" 
            PageButtonCount="15" position="Bottom" />
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <PagerStyle CssClass="pagination" HorizontalAlign="Left" 
                VerticalAlign="Middle" 
            Font-Size="14pt" Wrap="True" BackColor="#284775" />

but .pagination .current doesn't appears on current page and I can's see the border on it. What am I doing wrong ?

Try this (and change the colors/width as you like)

.pagination
{
  line-height: 26px;
}

.pagination span
{
  padding: 5px;
  border: solid 1px #477B0E;
  text-decoration: none;
  white-space: nowrap;
  background: #547B2A;
}

.pagination a, 
.pagination a:visited
{
  text-decoration: none;
  padding: 6px;
  white-space: nowrap;
}
.pagination a:hover, 
.pagination a:active
{
  padding: 5px;
  border: solid 1px #9ECDE7;
  text-decoration: none;
  white-space: nowrap;
  background: #486694;
}

...

<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Left" CssClass="pagination" />

a small example on how the number will shown: http://jsfiddle.net/THVb9/2/

1. getting better, flat style.

        .pagination td {
            border: 1px solid transparent !important;
        }
   
        .pagination span, .pagination a {
            display: flex !important;
            justify-content: center;
            align-items: center;
            height: 30px;
            width: 30px;
            padding: 10px;
            font-size: 12px;
            border-radius: 50px;
            text-decoration: none !important;
        }
   
        .pagination span {
            background: #C44569;
        }
   
        .pagination a,
        .pagination a:visited {
            color: #000;
        }
   
        .pagination a:hover,
        .pagination a:active {
            background-color: #C44569;
        }