CSS attribut "background-color" ne fonctionne pas sur la case à cocher à l'intérieur

le titre l'explique assez bien. J'ai quelques cases à cocher dans une div. Mais pour certaines raisons, l'attribut "background-color" ne fonctionne pas. Bien que le "bord supérieur" ne semble pas fonctionner...

je me demande comment un attribut peut fonctionner et un autre pas. Ce n'est pas non plus comme si le div avait ses propres attributs de couleur d'arrière-plan qui pourraient potentiellement dépasser les attributs des cases à cocher.

en tout cas, voici mon HTML (généré par JSP):

<div class="listContainer">
    <input type="checkbox" class="oddRow">item1<br/>
    <input type="checkbox" class="evenRow">item2<br/>
    <input type="checkbox" class="oddRow">item3<br/>
    <input type="checkbox" class="evenRow">item4<br/>
    ...
</div>

et voici mon CSS:

.listContainer {
            border:2px solid #ccc;
            width:340px;
            height: 225px;
            overflow-y: scroll;
            margin-top: 20px;
            padding-left: 10px;
        }

.oddRow {
            margin-top: 5px;
            background-color: #ffffff;
        }

.evenRow{
            margin-top: 5px;
            background-color: #9FFF9D;
        }

merci à l'avance pour toute personne qui peut me diriger dans la bonne direction!

36
demandé sur BalusC 2011-09-13 11:46:54
la source

6 ответов

une case à cocher n'a pas de couleur de fond, ce que vous pourriez vouloir faire est envelopper chaque case à cocher avec une div qui a la couleur. votre sortie devrait être quelque chose comme ceci:

<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>
53
répondu dov.amir 2016-01-19 23:27:39
la source

en plus de la réponse actuellement acceptée: vous pouvez définir la bordure et l'arrière-plan d'une case à cocher/radiobutton, mais la façon dont il est rendu à la fin dépend du navigateur. Par exemple, si vous mettez un fond rouge sur une case à cocher

  • IE montrera une bordure rouge au lieu de
  • Opéra montrera un fond rouge comme prévu
  • Firefox, Safari et Chrome ne feront rien

cet article compare quelques navigateurs et explique au moins le comportement de IE. Il est peut-être un peu plus ancien (y compris Netscape), mais lorsque vous le testez, vous remarquerez que peu de choses ont changé. Une autre comparaison peut être trouvée ici .

17
répondu Louise 2015-02-12 18:45:10
la source

vous pouvez utiliser des éléments peseudo comme ceci:

input[type=checkbox] {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 27px;
}

input[type=checkbox]:after {
  content: " ";
  background-color: #9FFF9D;
  display: inline-block;
  visibility: visible;
}

input[type=checkbox]:checked:after {
  content: "14";
}
<label>Checkbox label
      <input type="checkbox">
    </label>
10
répondu Diego Lins de Freitas 2018-09-14 15:17:13
la source

ma solution

initialement affiché ici .

input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background: lightgray;
  height: 16px;
  width: 16px;
  border: 1px solid white;
}

input[type="checkbox"]:checked {
  background: #2aa1c0;
}

input[type="checkbox"]:hover {
  filter: brightness(90%);
}

input[type="checkbox"]:disabled {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

input[type="checkbox"]:after {
  content: '';
  position: relative;
  left: 40%;
  top: 20%;
  width: 15%;
  height: 40%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

input[type="checkbox"]:checked:after {
  display: block;
}

input[type="checkbox"]:disabled:after {
  border-color: #7b7b7b;
}
<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>
1
répondu agirault 2018-04-19 21:54:41
la source

la meilleure solution pour changer la couleur de fond de case à cocher

input[type=checkbox] {
    margin-right: 5px;
    cursor: pointer;
    font-size: 14px;
    width: 15px;
    height: 12px;
    position: relative;
  }
  
  input[type=checkbox]:after {
    position: absolute;
    width: 10px;
    height: 15px;
    top: 0;
    content: " ";
    background-color: #ff0000;
    color: #fff;
    display: inline-block;
    visibility: visible;
    padding: 0px 3px;
    border-radius: 3px;
  }
  
  input[type=checkbox]:checked:after {
	  content: "✓";
	  font-size: 12px;
  }
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>

  <input type="checkbox" name="vehicle" value="Car" checked> I have a bus<br>
0
répondu B.Abdelbasset 2018-08-16 14:26:45
la source

lorsque vous entrez la balise body, appuyez sur space une seule fois sans fermer la balise et entrez bgcolor="red" , par exemple. Ensuite, choisissez une couleur différente pour votre police.

-3
répondu Friendly Banana 2015-09-21 17:02:20
la source

Autres questions sur html css checkbox background-color