← Tous les exemples

CSS Apparence admin.shopify.com

Mettre en évidence les cases de sélection

Ajoute un contour net aux cases des tableaux pour les viser plus facilement lors d'une sélection groupée.

Code à copier

.Polaris-IndexTable__TableRow .Polaris-Checkbox,
.Polaris-IndexTable td:has(.Polaris-Checkbox),
[class*="IndexTable"] [class*="Checkbox"] {
  outline: 2px solid rgba(0,128,96,0.5) !important;
  outline-offset: 1px !important;
  border-radius: 4px !important;
}
.Polaris-Checkbox__Input:checked + .Polaris-Checkbox__Backdrop {
  box-shadow: 0 0 0 2px #1a7f4b !important;
}

Comment utiliser cet exemple

  1. Copiez le code avec le bouton ci-dessus.
  2. Installez JustZix (2 minutes) et ouvrez l'extension sur la page cible.
  3. Ajoutez une nouvelle règle correspondant à cette page.
  4. Collez le code dans le panneau CSS de la règle et enregistrez — l'effet apparaît aussitôt.

Notez cet exemple

Aucune note — soyez le premier.

Cet exemple fonctionne-t-il ?

Les snippets sont inutiles sans un endroit où les coller.

JustZix s'installe en 2 minutes et exécute votre code sur chaque page correspondante. Sans compte, sans paiement.

Télécharger gratuitement Voir les cas d'usage