web-dev-qa-db-fra.com

L'attribut CSS '' background-color "ne fonctionne pas dans la case à cocher <div>

La rubrique l'explique assez bien. J'ai quelques cases à cocher à l'intérieur d'un div à défilement. Mais pour certaines raisons, l'attribut 'couleur de fond' ne fonctionne pas. Bien que la "marge supérieure" semble fonctionner ...

Je me demande comment un attribut peut fonctionner et un autre pas. Ce n’est pas non plus comme si la div possédait son propre ensemble d’attributs de couleur d’arrière-plan qui pourraient éventuellement outrepasser les attributs des cases à cocher.

Quoi qu'il en soit, voici mon HTML (qui est 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 d'avance à tous ceux qui peuvent me diriger dans la bonne direction!

htmlcsscheckboxbackground-color
38
Tiwaz89

Une case à cocher n'a pas de couleur d'arrière-plan Ce que vous voudrez peut-être faire est d'envelopper chaque case avec un div ayant la couleur .

<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>
54
dov.amir

En plus de la réponse actuellement acceptée: Vous pouvez définir la bordure et l’arrière-plan d’une case à cocher/d’un radiobutton, mais la manière dont il sera rendu dépend finalement du navigateur. Par exemple, si vous définissez un fond rouge sur une case à cocher

  • IE affichera une bordure rouge à la place
  • Opera affichera un fond rouge comme prévu
  • Firefox, Safari et Chrome ne feront rien

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

18
Louise

Vous pouvez utiliser des pseudo-éléments 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: "\2714";
}
<label>Checkbox label
      <input type="checkbox">
    </label>

14
Diego Lins de Freitas

Ma solution

Initialement posté 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
agirault

La meilleure solution pour changer la couleur de fond de la 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
B.Abdelbasset

Après tant de problèmes, je l'ai eu . 

.purple_checkbox:after {
  content: " ";
  background-color: #5C2799;
  display: inline-block;
  visibility: visible;
}

.purple_checkbox:checked:after {
  content: "\2714";
  box-shadow: 0px 2px 4px rgba(155, 155, 155, 0.15);
  border-radius: 3px;
  height: 12px;
  display: block;
  width: 12px;
  text-align: center;
  font-size: 9px;
  color: white;
}

Ce sera comme ça quand coché avec ce code .  enter image description here

0
lilhamad