How to apply css to codeigniter pagination?

Question

Here, is my pagination view like in blow image :

But, I want my pagination like below :

Here, Is my html stucture :

    <div class="pagination">
  <span class="label-pagination">Showing 1 to10 of 1147 entries </span>&nbsp;
  <b>1</b>&nbsp;
  <a href="javascript:void(0);" onclick="getContactSearchData(10)">2</a>&nbsp;
  <a href="javascript:void(0);" onclick="getContactSearchData(20)">3</a>&nbsp;
  <a href="javascript:void(0);" onclick="getContactSearchData(10)">›</a>&nbsp;&nbsp;
  <a href="javascript:void(0);" onclick="getContactSearchData(1140)">»</a>
</div>

css is :

.pagination {
    width: 100%;
    display: inline-block;

}
.pagination a{
    border: 1px solid #FFFFFF;
    transition: background-color .3s;
    float: right;
    text-decoration: none;
    padding: 8px 16px;
    color: #fff;

}
.page-display {
    float: right;
}
.pagination b {
    border: 1px solid #FFFFFF;
    transition: background-color .3s;
    float: right;
    text-decoration: none;
    padding: 8px 16px;
    color: #fff;
    background: #999999;

}
.pagination > a:first-child {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}
.pagination > a:last-child {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
}
.pagination .label-pagination {
    float: left;
}
.pagination a:hover {
    background: #999999;
}

Also I want my first and last pagination in border-radius, How do I do that?

Answer 1

You can do it like this.

Hope it will helps you.

 .page-display { float: right; } .pagination b { border: 1px solid #999999; transition: background-color .3s; text-decoration: none; padding: 8px 16px; color: #fff; background: #999999; float: left; } .pagination a:first-child { border-bottom-left-radius: 6px; border-top-left-radius: 6px; } .pagination a:last-child { border-bottom-right-radius: 6px; border-top-right-radius: 6px; } .pagination .label-pagination { float: left; } .pagination a:hover { background: #999999; } .pagination { display: inline-block; width: 100%; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; } .pagination a.active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; } .pagination a:hover:not(.active) {background-color: #ddd;} .pagination-btns { float: right; } 

 <div class="pagination"> <span class="label-pagination">Showing 1 to10 of 1147 entries </span> <span class="pagination-btns"> <b>1</b> <a href="javascript:void(0);" onclick="getContactSearchData(10)">2</a> <a href="javascript:void(0);" onclick="getContactSearchData(20)">3</a> <a href="javascript:void(0);" onclick="getContactSearchData(10)">›</a> <a href="javascript:void(0);" onclick="getContactSearchData(1140)">»</a> </span> </div>