Discussion :

[Zebulon777]

Bonjour à tous.

J'essaye désespérément de modifier le composant pagination de bootstrap, sans succès.

Je voudrai que le focus ne soit plus bleu, mais orange, et ça ne fonctionne pas.

Est-ce que quelqu'un peux m'aider, svp ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
...
      <div class="d-flex paging" >
        <span tabindex="0" class="btn-orange-fli">
        <pagination class="my-pagination" [totalItems]="nbFlights" [(ngModel)]="currentPage" [itemsPerPage]="pageSize" [maxSize]="4"
          [rotate]="false" [boundaryLinks]="true" previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;"
          lastText="&raquo;">
        </pagination>
      </span>
      </div>
...

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
...
.paging {
  justify-content: center;
  font-size: 0.8rem;
  height: 30px;
}
 
.my-pagination::ng-deep .page-item.active .page-link {
  outline-color: orange;
  outline-style: solid;
  outline-width: 1px;
}
...

[Pytet]

Bonjour,

Quel est la version de Bootstrap utilisé ?

Sauf erreur, avec version 5, la bordure appliquée sur les liens de pagination est définie avec un box-shadow : https://jsfiddle.net/epd1vmqc/

[Zebulon777]

Je trouve plusieurs choses dans l'appli Angular :

"bootstrap": "^4.3.1",
"ngx-bootstrap": "^6.1.0",

Merci de prendre le temps de m'aider.

Je viens d'essayer ta solution, ça fonctionne, mais ça ne fait pas ce que je veux : il faut que ça remplace le focus bleu qui passe de case en case, car on ne le voit pas assez sur le fond qui a été choisi.

[Zebulon777]

J'ai trouvé !
Voici la solution, si ça peut servir à quelqu'un.

Il faut aller en profondeur... huhu

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
::ng-deep .page-link:focus {
  outline-color: orange !important;
  outline-style: solid;
  outline-width: 3px;
}