How to apply css to codeigniter pagination? - php

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>
<b>1</b>
2
3
›
»
</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>
2
3
›
»
</span>
</div>