Pourquoi « background-color » ne fonctionne-t-il pas sur les cases à cocher dans un Div défilant et comment puis-je y remédier ?-tutoriel CSS-php.cn

Pourquoi « background-color » ne fonctionne-t-il pas sur les cases à cocher dans un Div défilant et comment puis-je y remédier ?

Barbara Streisand

Libérer： 2024-12-09 10:35:08

original

574 Les gens l'ont consulté

Why Doesn't `background-color` Work on Checkboxes in a Scrollable Div, and How Can I Fix It?

L'énigme de l'attribut de couleur d'arrière-plan des cases à cocher en CSS

Le problème survient lors de l'utilisation de l'attribut 'background-color' sur les cases à cocher dans un '< défilant ;div>'. Bien qu'il ait un attribut 'margin-top' spécifié qui fonctionne normalement, l'attribut 'background-color' reste inefficace.

La curiosité vient de la façon dont un attribut peut fonctionner tandis que l'autre échoue, en particulier lorsque l'attribut '< div>' ne définit aucun attribut de couleur d'arrière-plan conflictuel.

Cause et solution

La racine du problème réside dans la nature des cases à cocher. Les cases à cocher, par défaut, n'ont pas la capacité inhérente d'afficher les couleurs d'arrière-plan. Pour obtenir l'effet de couleur souhaité, vous pouvez cocher chaque case avec un «

» qui porte la couleur souhaitée.

Structure HTML révisée :

<div class="evenRow">
  <input type="checkbox" />
</div>
<div class="oddRow">
  <input type="checkbox" />
</div>
<div class="evenRow">
  <input type="checkbox" />
</div>
<div class="oddRow">
  <input type="checkbox" />
</div>

Copier après la connexion

En encapsulant chaque case à cocher dans un '

' coloré, il devient possible d'appliquer indirectement les couleurs d’arrière-plan. Cette technique émule efficacement la fonctionnalité de l'attribut « background-color » pour les cases à cocher.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source：php.cn

Article précédent：Comment puis-je mettre en majuscule uniquement la première lettre du texte en utilisant CSS ? Article suivant：Comment puis-je mettre en majuscule la première lettre d'une chaîne en utilisant CSS ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2486

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2630

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2224

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...